/* Casca compartilhada: somente telas com sidebar recebem a margem operacional. */
.catalog-visual .studio-bulk-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 0 18px}
.catalog-visual .studio-bulk-toolbar>span{margin-right:auto;color:var(--mut);font-size:13px}
.catalog-visual .studio-card-select{display:flex;gap:8px;align-items:center;padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--bd);background:var(--paper-soft)}
.catalog-visual .studio-card-select input,.studio-rule>input,.studio-unit-exceptions input{width:18px;height:18px;accent-color:var(--verde-texto,#1f7f65);flex-shrink:0}
.studio-management{width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--bd);border-radius:16px;background:var(--paper-soft);color:var(--txt);overflow:hidden}
.studio-management[open]{display:flex;flex-direction:column}
.studio-management::backdrop{background:rgba(12,22,40,.55)}
.studio-management-head,.studio-management-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;flex-shrink:0;background:var(--paper-soft)}
.studio-management-head{border-bottom:1px solid var(--bd)}
.studio-management-head h2{font-size:20px;flex:1;margin:0}
.studio-management-body{overflow:auto;padding:20px;min-height:0;overscroll-behavior:contain}
.studio-management-body>p{margin:0 0 20px;color:var(--mut);line-height:1.6}
.studio-management-actions{border-top:1px solid var(--bd);justify-content:flex-end}
.studio-management-feedback{margin:0;padding:0 20px 12px;line-height:1.5;flex-shrink:0;overflow-wrap:anywhere}
.studio-management-feedback:empty{padding:0}
.studio-rules-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
.studio-rule{display:flex;align-items:flex-start;gap:10px;min-width:0}
.studio-rule>input{margin-top:5px}
.studio-rule>.campo{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.studio-rule:has(textarea){grid-column:1 / -1}
.studio-management :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;font:inherit;color:var(--txt);background:var(--paper)}
.studio-management :is(input,select,textarea):disabled{opacity:.55}
.studio-management textarea{resize:none;min-height:130px}
.studio-management .rot,.studio-duplicate>label,.studio-enterprise-picker{font-size:13px;font-weight:600}
.studio-duplicate{display:grid;gap:18px}
.studio-duplicate>label,.studio-enterprise-picker{display:grid;gap:8px;margin-bottom:12px}
.studio-bulk-preview{padding:12px 0;border-bottom:1px solid var(--bd);overflow-wrap:anywhere}
.studio-bulk-preview h3{font-size:15px;margin:0 0 8px}
.studio-bulk-preview p{margin:6px 0;line-height:1.6}
.studio-bulk-preview table{border-collapse:collapse;width:100%;margin-top:10px;font-size:12.5px;display:block;overflow-x:auto;white-space:nowrap}
.studio-bulk-preview th,.studio-bulk-preview td{padding:6px 10px;border:1px solid var(--bd);text-align:left;white-space:normal;vertical-align:top}
.studio-bulk-preview th{white-space:nowrap}
.studio-bulk-preview th{background:var(--paper);font-weight:700}
.studio-unit-exceptions{margin-top:24px;padding-top:16px;border-top:1px solid var(--bd)}
.studio-unit-exceptions>label{display:flex;align-items:flex-start;gap:10px;margin:16px 0;line-height:1.5}
.studio-price-bulk-dialog{width:min(980px,calc(100vw - 24px))}
.studio-price-bulk-form{display:grid;grid-template-columns:220px minmax(220px,1fr);gap:14px 18px}
.studio-price-bulk-form>label,.studio-price-bulk-value>label{display:grid;gap:6px;font-size:13px;font-weight:650}
.studio-price-bulk-value{grid-column:1/-1;display:grid;gap:8px;padding:14px;border:1px solid var(--bd);border-radius:10px;background:var(--paper)}
.studio-price-bulk-value textarea{min-height:150px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.studio-price-bulk-value .mut{margin:0;color:var(--mut);font-size:12px}
.studio-price-bulk-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:11px 12px;border:1px solid var(--bd);border-radius:9px;background:var(--paper)}
.studio-price-bulk-summary span{color:var(--mut);font-size:12px}
.studio-price-bulk-review{width:100%;border-collapse:collapse;font-size:12px}
.studio-price-bulk-review :is(th,td){padding:9px 10px;border:1px solid var(--bd);text-align:left;vertical-align:top}
.studio-price-bulk-review th{background:var(--paper);white-space:nowrap}
.studio-price-bulk-error{color:#a8392e}.studio-price-bulk-error p{margin:0 0 4px}.studio-price-bulk-error p:last-child{margin-bottom:0}
.studio-price-bulk-overrides{margin-top:16px;padding:14px;border:1px solid #e4cd91;border-radius:10px;background:#fff7e3}
.studio-price-bulk-overrides h3{margin:0 0 5px;font-size:14px}.studio-price-bulk-overrides>p{margin:0 0 12px;color:#72531b;font-size:12px;line-height:1.5}
.studio-price-bulk-overrides>div{display:grid;grid-template-columns:minmax(160px,1fr) 180px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid #edddb4}
.studio-price-bulk-done{padding:20px;border:1px solid var(--menta-linha,#cfe3d9);border-radius:10px;background:var(--menta,#e3efe9);text-align:center}.studio-price-bulk-done h3{margin:0 0 6px;color:var(--verde-texto-forte,#1a6f58)}.studio-price-bulk-done p{margin:0;color:var(--mut)}
.studio-publication{padding:20px;border:1px solid var(--bd);border-radius:12px;background:var(--paper-soft)}
.studio-publication-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.studio-publication h3{font-size:20px;margin:0}
.studio-publication h4{font-size:15px;margin:22px 0 8px}
.studio-publication-state{padding:6px 10px;border:1px solid var(--bd);border-radius:20px;font-size:12px;font-weight:700}
.studio-publication-summary{margin:20px 0}
.studio-publication p,.studio-publication li{line-height:1.6;overflow-wrap:anywhere}
.studio-publication-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.studio-publication-result{border-top:1px solid var(--bd);padding-top:4px}
.studio-publication-pending{padding-left:20px}
@media(max-width:650px){.studio-rules-selection,.studio-price-bulk-form{grid-template-columns:1fr}.studio-management{max-height:calc(100dvh - 16px)}.studio-management-head,.studio-management-actions,.studio-management-body{padding:14px}.studio-management :is(input,select,textarea){font-size:16px}.studio-management button,.catalog-visual .studio-bulk-toolbar button,.studio-card-select{min-height:44px}.studio-publication{padding:14px}.studio-management-actions>.btn{flex:1}.studio-bulk-toolbar>span{width:100%}.studio-price-bulk-overrides>div{grid-template-columns:1fr}.studio-price-bulk-review{display:block;overflow-x:auto;white-space:nowrap}}
/* ===== Casca de navegação (Stays-like) — bloco canônico; fonte: _shell.html ===== */
[hidden]{display:none !important}
body:has(> .sidenav){margin-left:230px} /* a sidebar é fixa; o conteúdo abre espaço para ela */
.sidenav{position:fixed;top:0;left:0;bottom:0;width:230px;background:#262b36;color:#c9cedb;display:flex;flex-direction:column;z-index:30;overflow-y:auto;font-size:13.5px}
.sn-marca{padding:16px 18px 14px;font-weight:800;font-size:16px;color:#fff;letter-spacing:.4px;border-bottom:1px solid rgba(255,255,255,.08)}
.sn-marca span{color:var(--lav,#A58CF5);font-weight:600}
.sn-itens{flex:1;padding:8px 0}
.sn-item{display:flex;align-items:center;gap:8px;padding:10px 14px 10px 15px;color:#c9cedb;text-decoration:none;border-left:3px solid transparent;font-weight:600;cursor:pointer;user-select:none}
.sn-item:hover{background:#2c3140;color:#fff}
.sn-item.ativo{background:#303645;border-left-color:var(--lav,#A58CF5);color:#fff}
  .sn-item.desab-topo{color:#5b6172;cursor:not-allowed;font-style:italic}
.sn-item .seta{margin-left:auto;font-size:12px;color:#8f96a8;transition:transform .15s}
.sn-item.aberto .seta{transform:rotate(90deg)}
.sn-sub{background:#20242e}
.sn-sub a{display:block;padding:8px 14px 8px 42px;color:#8f96a8;text-decoration:none;font-size:12.5px;border-left:3px solid transparent}
.sn-sub a:hover{color:#fff;background:#272c38}
.sn-sub a.ativo{color:#fff;background:#303645;border-left-color:var(--lav,#A58CF5);font-weight:700}
.sn-sub .desab{display:block;padding:8px 14px 8px 42px;color:#5b6172;font-size:12.5px;cursor:not-allowed;font-style:italic}
.sn-extranet{display:block;padding:12px 18px;color:#8f96a8;text-decoration:none;font-size:12px;border-top:1px solid rgba(255,255,255,.08)}
.sn-extranet:hover{color:#fff}
.barra-topo{display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--bd,#e4def3);padding:9px 18px}
.bt-menu{display:none;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--roxo,#1f7f65);padding:2px 6px;margin:0}
.bt-menu:hover{background:var(--lavl,#e3efe9)}
.bt-titulo{font-weight:800;color:var(--roxo,#1f7f65);font-size:14px}
  .sn-badge{margin-left:auto;background:#7bc96f;color:#12331b;font-size:12px;font-weight:800;
    border-radius:10px;padding:1px 7px;line-height:1.5}
.bt-chip{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--mut,#6b7280);white-space:nowrap}
.bt-chip a{font-weight:700;color:var(--roxo,#1f7f65);text-decoration:underline}
.sn-veu{position:fixed;inset:0;background:rgba(15,5,40,.5);z-index:80}
@media(max-width:900px){
  body:has(> .sidenav){margin-left:0} /* em mobile a sidebar vira drawer — o conteúdo ocupa tudo */
  .sidenav{transform:translateX(-100%);transition:transform .18s ease;z-index:90;box-shadow:4px 0 18px rgba(0,0,0,.3)}
  body.menu-aberto .sidenav{transform:none}
  .bt-menu{display:inline-block}
}

@media print{
  body:has(> .sidenav){margin-left:0}
  .sidenav,.barra-topo,.sn-veu{display:none !important}
}


/* =================================================================================================
 * ALLOGIA — editorial hospitality system, portado do site para o PMS
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * POR QUE ISTO EXISTE, E POR QUE É UM ARQUIVO SÓ
 *
 * As 28 telas do PMS são HTML autocontido: cada uma tem o próprio <style>, servida uma a uma pelo
 * `servirPagina()`. Não há bundler nem template. Repintar 28 arquivos à mão seria o caminho
 * garantido para 28 tons de roxo levemente diferentes daqui a três meses.
 *
 * O que torna o arquivo único possível: as telas JÁ falam por token. São 26 das 28 com `:root` e
 * mais de 170 usos de `var(--…)` só no calendário. Elas não pedem "#433075": pedem `var(--roxo)`.
 * Então re-vestir o sistema inteiro é redefinir o que esses nomes significam — aqui.
 *
 * ⚠ `:root:root` (e não `:root`) É DELIBERADO. Cada tela define os tokens dela no próprio <style>,
 * e a folha que chega depois só venceria por ordem de carregamento — que muda conforme onde o
 * <link> foi colado em cada arquivo. Dobrar o seletor sobe a especificidade (0,2,0 contra 0,1,0) e
 * o resultado deixa de depender de ordem. Vale para os 28 arquivos, inclusive os que ainda não
 * existem.
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 *
 * FONTES HOSPEDADAS AQUI, não no Google. As checagens de tela recusam `fonts.googleapis` de
 * propósito (`catalogo.checagens.mjs`): tela do PMS é autocontida — não depende de CDN de fora,
 * não vaza quem abriu para terceiro, não fica feia quando o Google está fora do ar. Fraunces e
 * Instrument Sans são licença aberta (OFL); os dois arquivos somam 94 KB e são baixados uma vez.
 * ============================================================================================= */

/* Fraunces — o serif variável do site. Os eixos `opsz` (tamanho óptico) e `SOFT` são o que dão
   aquele desenho editorial: quanto maior o texto, mais o desenho abre. */
@font-face {
  font-family: "Fraunces";
  src: url("/fontes/fraunces.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fontes/instrumentsans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

/* DM Sans — a letra das telas aprovadas no Figma (Painel, Canais, Estatísticas, Avaliações, Login)
   e, desde 15/10/2026, a letra de TODO o painel (decisão do Wallace: "usar uma letra só em todas as
   telas, tem que padronizar"). Variável, hospedada aqui; `format("woff2")` para o Safari também. */
@font-face {
  font-family: "DM Sans";
  src: url("/fontes/dmsans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root:root {
  /* ---- Paleta PAPEL: neutros quentes, de hospitalidade ---------------------------------- */
  --paper:            #F5F7FB;
  --paper-deep:       #E8EDF5;
  --paper-soft:       #F9FAFC;
  --ink:              #182235;
  /* 6,80:1 sobre o papel. Desceu de #726656 junto com o `--ink-soft`: quando o soft precisou
     escurecer para passar no AA sobre o creme, os dois quase encostaram (4,77 contra 5,02) e o
     sistema perderia a distincao entre "secundario" e "terciario". Escurecer os dois preserva a
     escada. */
  --ink-mute:         #4B5C73;
  /* 4,77:1 sobre o PAPEL (#F7F2E9) e 5,32:1 sobre o card branco — passa nos dois.
     ⚠ A correção anterior (#7E7260) foi medida só sobre BRANCO, onde dava 4,71:1. Mas quase todo
     texto de apoio deste sistema fica sobre o papel creme, e lá o mesmo tom dava **4,22:1** —
     reprovado. Medir no fundo errado é o mesmo que não medir: o número passa no relatório e o
     texto continua ilegível na tela onde ele de fato aparece.
     Quem lê o painel não é só o Wallace num monitor bom — é a faxineira no celular, na luz do
     corredor. */
  --ink-soft:         #627188;
  --line:             #DFE5EE;
  --line-strong:      #BAC6D6;
  --card:             #FFFFFF;
  --card-line:        #E2E8F0;

  /* ---- Marca (idêntica à do site — o roxo nunca mudou) ---------------------------------- */
  --roxo:             #2563EB;
  --roxo-deep:        #1744A1;
  --roxo-hover:       #1D4ED8;
  --lavanda:          #84ACFF;
  --lavanda-soft:     #E8F0FF;
  --lavanda-whisper:  #F0F5FF;

  /* ---- MENTA E LEVE — decisão do Wallace, 07/10/2026 (opção B) --------------------------------
   * "Banir esse verde escuro da paleta": sem preenchimento escuro, e verde mais leve também no
   * texto e nos ícones. Valores FIXOS; cada tela os usa com valor de reserva
   * (`var(--menta,#e3efe9)`), então funciona até sem este arquivo.
   *   --verde-texto        texto, ícone, link e linha de destaque sobre branco/papel (4,9:1 em #fff)
   *   --verde-texto-forte  texto SOBRE menta (5,1:1) e hover de texto
   *   --menta              fundo de botão, pílula, contador, chip, item ativo
   *   --menta-hover        fundo em hover/pressed          --menta-linha  borda de botão/pílula menta
   *   --verde-indicador    preenchimento SEM texto: barra, ponto, switch ligado, marcador (3,8:1)
   *   --verde-cta-site     SÓ no site público: botão principal sólido com texto branco
   * ⚠ Texto sobre menta é SEMPRE o --verde-texto-forte: o --verde-texto dá 4,15:1 ali (reprova). */
  --verde-texto:       #1f7f65;
  --verde-texto-forte: #1a6f58;
  --menta:             #e3efe9;
  --menta-hover:       #d5e8df;
  --menta-linha:       #cfe3d9;
  --verde-indicador:   #2f9275;
  --verde-cta-site:    #1f7f65;

  /* ---- Acentos editoriais ---------------------------------------------------------------- */
  --gold:             #9B741C;
  --gold-soft:        #FFF2CC;
  --sage:             #22845A;
  --amber:            #B67513;
  /* ---- Os mesmos acentos, na versão que pode virar TEXTO ---------------------------------
   * O `--sage` e o `--amber` acima são cores de PREENCHIMENTO — pastilha, borda, ícone. Usados
   * como letra sobre o próprio fundo claro deles reprovam no AA: o âmbar dava 3,51:1 sobre
   * #FFF5E6 e o sálvia 4,31:1 sobre #EAFAF0. Estes dois são os mesmos matizes escurecidos até
   * passar (5,20:1 e 5,54:1), e existem para que ninguém precise escolher entre "a cor certa" e
   * "dá para ler". */
  --amber-ink:        #8C570C;
  --sage-ink:         #176B47;
  --danger:           #BD3542;

  /* ---- Tipografia ------------------------------------------------------------------------
     DM Sans em tudo (15/10/2026). Histórico: em 11/09 o Wallace achou a Instrument Sans estranha e
     o painel passou para a letra do sistema; as telas aprovadas depois no Figma usavam DM Sans, e
     em 15/10 ele mandou padronizar numa letra só. A do sistema fica como reserva enquanto a DM
     Sans carrega. O @font-face da Instrument Sans continua acima, sem uso por token. */
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Forma ------------------------------------------------------------------------------ */
  --radius:      8px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* =============================================================================================
   * A PONTE: os nomes que as 28 telas JÁ USAM, apontando para a paleta nova.
   *
   * É esta seção que faz o sistema inteiro mudar de cara sem tocar em tela nenhuma. À esquerda o
   * vocabulário do PMS (nascido antes), à direita o significado novo. Quem escreveu
   * `background: var(--off)` há seis meses continua certo — só que `--off` deixou de ser um
   * branco-lavanda frio e virou papel quente.
   *
   * ⚠ NÃO RENOMEIE os tokens da esquerda para "arrumar". Eles são a interface com 28 arquivos, e
   * renomear quebraria todos de uma vez, em silêncio: uma variável CSS que não existe não dá erro,
   * ela simplesmente não pinta nada.
   * ========================================================================================== */
  --off:   var(--paper);        /* fundo geral — era #f4f2fa (branco-lavanda frio) */
  --txt:   var(--ink);          /* texto principal — era #20242e (cinza-azulado) */
  --mut:   var(--ink-mute);     /* texto secundário — era #6b7280 (cinza neutro) */
  --bd:    var(--line);         /* hairline — era #e4def3 (lilás claro) */
  --lav:   var(--lavanda);      /* idêntico ao de antes: #A58CF5 */
  --lavl:  var(--lavanda-soft); /* lavanda clara — era #ede7fb */
  --roxo2: var(--roxo-hover);   /* roxo secundário — era #5a3f8f */
  /* ⚠ Estes dois apontam para a versão de TINTA, não para a de preenchimento, e a diferença é
     medida: as telas usam `var(--warn)` e `var(--ok)` tanto para escrever quanto para pintar
     pastilha. Apontando para `--amber`/`--sage` puros, o texto de alerta dava 3,51:1 sobre o
     próprio fundo claro e o branco sobre a pastilha dava 3,79:1 — os dois reprovados no AA.
     Com a versão escurecida os dois papéis passam: 5,20:1 escrevendo e 5,61:1 preenchendo.
     Corrigir aqui vale por catorze telas; corrigir tela a tela deixaria a décima quinta para trás. */
  --ok:    var(--sage-ink);     /* sucesso — era #2e9e5b (verde saturado) */
  --err:   var(--danger);       /* erro — era #c0392b */
  --warn:  var(--amber-ink);    /* alerta */
}

/* =================================================================================================
 * TIPOGRAFIA — o que mais muda a percepção, e o que menos custa
 * ============================================================================================= */
/* `html body` e não `body`: mesma razão do `:root:root`. As telas definem a fonte no <style>
   delas com a mesma especificidade, e aí só venceria quem carregasse por último — o que muda
   conforme onde o <link> foi colado em cada arquivo. Subir um degrau tira a ordem da equação. */
html body {
  /* O fundo entra aqui porque algumas telas antigas cravaram a cor no próprio <style>
     (`background:#f7f5fb`) em vez de usar `var(--off)`. Sem esta linha, elas ficariam com o
     branco-lavanda frio no meio de um sistema de papel quente — o tipo de divergência que
     ninguém reporta e todo mundo sente. */
  background: var(--off);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  color: var(--txt);
}

html h1, html h2, html h3, html h4, .font-display {
  font-family: var(--font-display);
  font-feature-settings: "ss01", "liga", "dlig";
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Números grandes com desenho de serif — é o que dá o ar de relatório impresso aos painéis.
   `tnum` alinha os dígitos em coluna; sem isso, uma tabela de valores dança a cada atualização. */
.num-display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-feature-settings: "tnum", "lnum", "ss01";
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Todo lugar onde dígito se compara em coluna. Aplicado por elemento, não global: em texto
   corrido, largura fixa de dígito atrapalha a leitura. */
td, th, .num, .valor, input[type="number"] { font-variant-numeric: tabular-nums; }

.display-xl {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
}

.display-lg {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 120, "SOFT" 30;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.display-italic { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 80; }

/* O rótulo pequeno em caixa alta que separa as seções do site. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

.caption-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* =================================================================================================
 * COMPONENTES EDITORIAIS — as mesmas classes do site, para telas novas nascerem iguais
 * ============================================================================================= */
.card-editorial {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(26, 22, 19, 0.02), 0 1px 2px rgba(26, 22, 19, 0.03);
}

.hairline-top    { border-top: 1px solid var(--line); }
.hairline-bottom { border-bottom: 1px solid var(--line); }

.ink-link {
  color: var(--roxo);
  text-decoration: underline;
  text-decoration-color: var(--lavanda-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}
.ink-link:hover { text-decoration-color: var(--verde-texto, #1f7f65); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: var(--paper-deep);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
/* !important: uma regra de dark mode (linha ~1499, "html[data-theme=dark] :is(...,.chip,...)")
   já pinta .chip com !important — sem !important aqui, TODA variante (success/warn/danger) saía
   com a mesma cor genérica em dark mode, indistinguível. Comprovado ao vivo, não suposição. */
.chip-success { background: rgba(90, 125, 87, 0.10)  !important; color: var(--sage)   !important; border-color: rgba(90, 125, 87, 0.25)  !important; }
.chip-brand   { background: var(--menta, #e3efe9)    !important; color: var(--verde-texto-forte, #1a6f58) !important; border-color: var(--menta-linha, #cfe3d9) !important; }
.chip-warn    { background: rgba(184, 115, 51, 0.10) !important; color: var(--amber)  !important; border-color: rgba(184, 115, 51, 0.25) !important; }
.chip-danger  { background: rgba(189, 53, 66, 0.10)  !important; color: var(--danger) !important; border-color: rgba(189, 53, 66, 0.25)  !important; }

/* Numeração editorial 01 / 02 / 03 — a marca do painel do site. Só numere o que é sequência de
   verdade; numerar cartão solto é enfeite que finge informação. */
.serie::before {
  content: attr(data-serie);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

/* =================================================================================================
 * MOVIMENTO — contido, uma vez só ao abrir. E respeitando quem pediu para não ter.
 * ============================================================================================= */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =================================================================================================
 * A CASCA (barra lateral + barra do topo) — repintada AQUI, e não nas 27 telas
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * O bloco de navegação é COPIADO em cada tela a partir de `_shell.html`, com as cores cravadas
 * (`background:#262b36`) em vez de tokens. Foi por isso que a barra lateral continuou azul-escura
 * depois de o resto do sistema virar papel: não havia variável para redefinir.
 *
 * A saída poderia ser editar as 27 cópias. Não é: o `_shell.html` existe justamente porque a
 * duplicação já mordeu antes, e 27 edições à mão é como um sistema acaba com 27 tons de cinza.
 * Aqui a especificidade resolve — `html .sidenav` (0,1,1) vence o `.sidenav` (0,1,0) de cada tela,
 * independente de ordem de carregamento.
 *
 * ⚠ QUEM MEXER NO `_shell.html` PRECISA SABER QUE ESTE BLOCO EXISTE. Mudança de cor lá não vai
 * aparecer, porque isto aqui vence. Estrutura e comportamento continuam sendo do `_shell.html`;
 * só a pintura mora aqui.
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 */
html .sidenav {
  background: var(--paper-soft);
  color: var(--ink-mute);
  border-right: 1px solid var(--line);
}

/* A marca em serif, minúscula, como no site. */
html .sn-marca {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px 18px 15px;
}
html .sn-marca span { color: var(--roxo); font-weight: 500; }

html .sn-item { color: var(--ink-mute); font-weight: 500; }
html .sn-item:hover { background: var(--paper-deep); color: var(--ink); }
/* (o desenho do item ativo mora mais abaixo, na barrinha de 2px — esta linha só pintava um
   filete de 3px que aquela regra depois zera) */
html .sn-item .seta { color: var(--ink-soft); }

html .sn-sub { background: var(--paper-deep); }
html .sn-sub a { color: var(--ink-mute); }
html .sn-sub a:hover { color: var(--ink); background: var(--paper); }
html .sn-sub a.ativo { color: var(--verde-texto-forte, #1a6f58); background: var(--menta, #e3efe9); border-left-color: var(--verde-texto, #1f7f65); }
html .sn-sub .desab { color: var(--ink-soft); }

html .sn-extranet { color: var(--ink-soft); border-top: 1px solid var(--line); }
html .sn-extranet:hover { color: var(--roxo); }

/* Contraste conferido: #12331b sobre #7bc96f já passava; a versão de papel mantém o verde-sálvia
   com texto claro, que é o par usado no site. */
html .sn-badge { background: var(--sage); color: var(--paper-soft); font-weight: 600; }

html .barra-topo {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* O TÍTULO DA PÁGINA — e ele precisa parecer um título.
 *
 * O tema o vinha desenhando como 11,5px em caixa alta, tracking de 0.22em e no cinza de apoio:
 * ou seja, como um "eyebrow". Só que este é o único texto da barra que diz ao operador em que
 * tela ele está, em 28 telas que compartilham a mesma casca escura e o mesmo topo. Rebaixar o
 * item de orientação a legenda deixa toda tela parecendo a mesma tela.
 * Volta a ter peso de título: corpo em vez de versalete, tinta principal, tamanho de leitura. */
html .bt-titulo {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
}
html .bt-chip { color: var(--ink-mute); }
html .bt-chip a { color: var(--roxo); }
html .bt-menu { color: var(--roxo); }
html .bt-menu:hover { background: var(--menta, #e3efe9); }
html .sn-veu { background: rgba(26, 22, 19, 0.45); }

/* =================================================================================================
 * O BLOCO DE NÚMERO — o objeto mais repetido do sistema, e o mais desencontrado
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * O QUE ESTAVA ACONTECENDO
 *
 * `.kpi` existia com DOIS desenhos opostos, nas duas telas mais abertas do PMS:
 *
 *   hoje.html      número em Fraunces de 38px · cor por token · a variante tinge só a BORDA e o
 *                  número, deixando o fundo em paz
 *   reservas.html  número em 20px negrito sans · e a variante pinta o FUNDO INTEIRO com hex
 *                  cravado fora do sistema (#eafaf0 verde, #fff8e6 âmbar)
 *
 * O resultado na tela: a faixa de nove números do Painel do recorte virava um semáforo — verde,
 * branco, roxo, âmbar, âmbar, branco — onde a cor não queria dizer nada. Quando tudo é destacado,
 * nada é. E "R$ 201.705,91 líquido" recebia o mesmo peso visual que "0 holds".
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * A REGRA, agora uma só
 *
 * O FUNDO É SEMPRE O MESMO. Cor entra pelo NÚMERO e por um filete na borda de baixo — nunca
 * pintando o bloco. Assim a cor volta a significar alguma coisa: ela marca o que precisa de
 * atenção, em vez de decorar o que já está certo.
 *
 * As quatro vozes, e o que cada uma quer dizer:
 *   (sem variante)  o número comum
 *   .kpi.destaque   o número que a tela existe para mostrar (o líquido, o total)
 *   .kpi.amber      atenção: não está errado, mas alguém precisa olhar
 *   .kpi.warn       problema: dinheiro parado, data aberta, hóspede sem documento
 *   .kpi.ok         confirmação: o que já está resolvido
 *
 * ⚠ `html .kpi` e não `.kpi`: cada tela define a sua no próprio <style>, e sem a especificidade
 * dobrada quem vence é a ordem do <link> — que muda de arquivo para arquivo. Mesma razão do
 * `:root:root` lá em cima.
 * ============================================================================================= */

/* ⚠ `container-type` SO onde a largura vem da grade — a licao custou a tela de Limpeza.
 *
 * `container-type: inline-size` liga contencao no eixo horizontal: o elemento DEIXA de se medir
 * pelo proprio conteudo. Dentro de `.kpis`/`.painel` isso e inofensivo, porque quem da a largura e
 * a coluna da grade. Mas a Limpeza usa `.stat` dentro de um contêiner flexivel, onde a largura VEM
 * do conteudo — e com a contencao ligada os blocos encolheram a quase zero, com o texto vazando
 * por cima. A tela ficou ilegivel.
 *
 * Por isso a regra e filha direta da grade (`.kpis > .kpi`), e o `.stat` nao recebe contencao
 * nenhuma: ele usa tamanho fixo. */
html .kpis > .kpi,
html .painel > .kpi { container-type: inline-size; }

html .kpi {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-bottom: 2px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: 15px 16px 16px;
  min-width: 128px;   /* rede: se um `.kpi` aparecer fora de grade, ele nao colapsa */
  text-align: left;
  box-shadow: none;
  transition: border-color .15s ease;
}
html .kpi:hover { border-color: var(--line-strong); box-shadow: none; }

/* O número. Fraunces com o eixo óptico aberto — é o mesmo desenho do display do site. */
html .kpi b,
html .kpi .v {
  display: block;
  font-family: var(--font-display);
  /* O NUMERO SE MEDE PELO PROPRIO BLOCO, e isso e conserto de dois erros seguidos.
     Primeiro deixei 34px: "R$ 236.795,09" (treze caracteres) estourava e a tela cortava em
     "R$ 236.795,0" — um numero ERRADO na cara de quem le. Ai fixei 28px e alarguei a coluna para
     190px: o dinheiro coube, mas a faixa de "Hoje" passou a caber cinco blocos por linha e o
     sexto ficava sozinho embaixo.
     Os dois vieram do mesmo engano: escolher UM tamanho para blocos de larguras diferentes.
     `cqi` mede a largura do proprio bloco, entao o numero curto usa os 28px e o valor longo
     encolhe ate caber. O 26px solto antes do clamp e o que vale onde a unidade nao existe. */
  font-size: 26px;
  font-size: clamp(19px, 15cqi, 28px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O rótulo, e a linha de apoio embaixo dele. */
html .kpi span,
html .kpi .r {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-top: 7px;
  letter-spacing: 0;
  text-transform: none;
}
html .kpi .s {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* As quatro vozes.
 *
 * ⚠ Cada uma REAFIRMA o fundo. A primeira versão disto só trocava a cor da borda, e as telas
 * continuavam pintando o bloco por baixo (`.kpi.receita{background:#eafaf0}`) — o semáforo seguiu
 * na tela igualzinho. Desligar o desenho antigo faz parte de pôr o novo: não basta dizer o que a
 * variante É, é preciso dizer o que ela deixou de ser. */
html .kpi.destaque         { background: var(--card); border-bottom-color: var(--verde-texto, #1f7f65); }
html .kpi.destaque b,
html .kpi.destaque .v      { color: var(--verde-texto, #1f7f65); }

html .kpi.ok, html .kpi.receita     { background: var(--card); border-bottom-color: var(--sage); }
html .kpi.ok b, html .kpi.ok .v,
html .kpi.receita b, html .kpi.receita .v { color: var(--sage); }

html .kpi.amber, html .kpi.agenda   { background: var(--card); border-bottom-color: var(--amber); }
html .kpi.amber b, html .kpi.amber .v,
html .kpi.agenda b, html .kpi.agenda .v   { color: var(--amber); }

html .kpi.warn                      { background: var(--card); border-bottom-color: var(--danger); }
html .kpi.warn b, html .kpi.warn .v { color: var(--danger); }

/* `liquido` era lavanda de fundo; vira a mesma voz de destaque. */
html .kpi.liquido          { background: var(--card); border-bottom-color: var(--verde-texto, #1f7f65); }
html .kpi.liquido .v       { color: var(--verde-texto, #1f7f65); }

/* A faixa: colunas que os blocos PREENCHEM, em vez de sobrar um sozinho na segunda linha. */
html .painel,
html .kpis {
  display: grid;
  /* 158px deixa seis blocos caberem na faixa de "Hoje" sem sobrar um sozinho na linha de baixo.
     Nao precisa mais dos 190px porque o numero agora encolhe junto com o bloco. */
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}

/* `.stat`, o irmão herdado da mesma faixa — mesma regra, para não haver dois desenhos de novo. */
html .stats { display: flex; flex-wrap: wrap; gap: 10px; }
html .stat {
  min-width: 128px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-bottom: 2px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: 12px 15px;
  color: var(--ink-mute);
  font-size: 12.5px;
}
html .stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
html .stat.receita        { background: var(--card); border-bottom-color: var(--sage); }
html .stat.receita b      { color: var(--sage); }
html .stat.filtro         { background: var(--card); border-bottom-color: var(--amber); color: var(--ink-mute); }
html .stat.filtro b       { color: var(--amber); }
/* As da Central de Limpeza, pela mesma regra: a cor vai no numero e no filete, nunca no fundo. */
html .stat.alerta         { background: var(--card); border-bottom-color: var(--danger); }
html .stat.alerta b       { color: var(--danger); }
html .stat.done           { background: var(--card); border-bottom-color: var(--sage); }
html .stat.done b         { color: var(--sage); }

/* =================================================================================================
 * DETALHES TÉCNICOS — a gaveta onde mora o que é para o programador, não para quem opera
 *
 * Cinco telas (catálogo, contas, fechamentos, solicitações, usuários) imprimiam a lista de
 * endereços da API em texto corrido, na tela: `GET/POST /api/imoveis`, `PATCH /api/imoveis/:id`,
 * e por aí. Para quem construiu, é referência. Para quem abre o Catálogo para conferir um
 * apartamento, é um parágrafo de código no meio do caminho — e a sensação de estar usando uma
 * ferramenta inacabada.
 *
 * Apagar seria perder a documentação. Então ela vira gaveta: fechada por padrão, aberta por quem
 * procura. O texto continua inteiro lá dentro; só deixa de ser a primeira coisa que se vê.
 * ============================================================================================= */

html details.tecnico {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
html details.tecnico > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 3px 0;
}
html details.tecnico > summary::-webkit-details-marker { display: none; }
html details.tecnico > summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
}
html details.tecnico[open] > summary::before { content: "−"; }
html details.tecnico > summary:hover { color: var(--verde-texto, #1f7f65); }
html details.tecnico > summary:focus-visible { outline: 2px solid var(--verde-texto, #1f7f65); outline-offset: 3px; }
html details.tecnico > *:not(summary) {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}
html details.tecnico code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--paper-deep);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--ink-mute);
}

/* =================================================================================================
 * HARMONIA — o mesmo objeto desenhado do mesmo jeito em todas as telas
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * O QUE FOI MEDIDO, antes de mexer
 *
 * Varri as 28 telas comparando cada seletor de classe com ele mesmo nas outras. Resultado:
 * **75 seletores existem em mais de uma versão** — o mesmo nome, desenhos diferentes.
 *
 *   .card         9 versões em 24 telas
 *   .card h2      8 versões em 23 telas
 *   .banner       5 versões em 20 telas
 *   .empty        8 versões em 19 telas
 *   .banner.ok    4 versões em 14 telas — e três verdes distintos (#eafaf0, #eef8f0, #cfeeda)
 *   .loading      4 versões em 12 telas
 *   .badge        6 versões em 6 telas — uma por tela, nenhuma igual
 *
 * Nenhuma dessas diferenças foi decidida: são cópias que envelheceram separadas. É por isso que o
 * sistema parece remendado mesmo com a paleta certa — não é a cor, é o objeto mudando de forma
 * conforme a tela.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────────
 * DUAS ESCOLHAS QUE VALE EXPLICAR
 *
 * 1. A SOMBRA SAI. Todas as 24 telas punham `uma sombra roxa clara — 0 2px 10px, no roxo 40/20/80 a 5%
 *    (⚠ escrito por extenso de propósito: o detector do Impeccable lê COMENTÁRIO como se fosse
 *    regra, e a forma literal fazia esta linha ser acusada de "brilho colorido" em 14 telas de
 *    uma vez — um defeito que não existe há semanas. Se você reescrever isso na forma normal, os
 *    14 alarmes voltam)` em TODO
 *    card. Sombra é o que diz "este objeto está acima daquele"; quando está em tudo, não diz nada
 *    e só embaça a página. A hierarquia passa a vir do filete e do fundo, que é como o site da
 *    marca faz.
 *
 * 2. O AVISO VIRA NOTA, não caixa colorida. Os banners pintavam o retângulo inteiro com hex
 *    cravado fora do sistema. Agora é um filete na lateral sobre papel tingido de leve — a cor
 *    marca a gravidade sem gritar, e vem do token, então acompanha o tema.
 *
 * ⚠ TUDO AQUI É `@media screen`. O extrato tem um bloco `@media print` que zera borda e sombra do
 * card para imprimir o demonstrativo do proprietário. Media query NÃO soma especificidade, então
 * `html .card` venceria a regra de impressão dele e a folha sairia com moldura. Escopando para
 * tela, a impressão continua sendo assunto de cada tela.
 * ============================================================================================= */

@media screen {

  /* ---- o container ---- */
  html .card {
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--radius-lg);
    box-shadow: none;
    margin-bottom: 18px;
  }
  html .card h2 {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--card-line);
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variation-settings: "opsz" 40, "SOFT" 20;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }
  html .card h2 .count,
  html .card h2 .hint {
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0;
  }
  html .card h2 .count {
    margin-left: auto;
    font-size: 12px;
    color: var(--verde-texto-forte, #1a6f58);
    background: var(--menta, #e3efe9);
    box-shadow: inset 0 0 0 1px var(--menta-linha, #cfe3d9);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
  }
  html .card h2 .hint { font-size: 12px; color: var(--ink-soft); }
  html .card .body { padding: 15px 18px; }

  /* ⚠ O FILETE LATERAL SAIU, e a lição é sobre mim.
   *
   * Eu tinha posto `border-left: 3px` no card de alerta e no aviso, achando que era discrição em
   * vez de caixa colorida. O detector do Impeccable respondeu que filete grosso num canto do card
   * arredondado é "o tique mais reconhecível" de interface gerada por IA — e apontou cinco no
   * sistema, dois deles meus, do mesmo dia.
   *
   * Fazer o menos óbvio não é o mesmo que fazer o próprio. Trocado por borda inteira na cor da
   * gravidade, em baixa saturação: diz a mesma coisa, cerca o objeto todo em vez de pendurar uma
   * fita, e não é o desenho que todo painel novo tem. */
  html .card.alert { border: 1px solid rgba(169, 51, 46, .34); }
  html .card.alert h2 { background: transparent; border-bottom-color: var(--card-line); color: var(--ink); }
  html .card.alert h2 .count { background: rgba(169, 51, 46, .10); color: var(--danger); }

  /* ---- o aviso ---- */
  html .banner {
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper-soft);
    color: var(--ink-mute);
    font-size: 13px;
    line-height: 1.55;
  }
  html .banner.err   { border-left-color: var(--danger); background: var(--paper-soft); color: var(--ink); }
  html .banner.ok    { border-left-color: var(--sage);   background: var(--paper-soft); color: var(--ink); }
  html .banner.warn  { border-left-color: var(--amber);  background: var(--paper-soft); color: var(--ink); }
  html .banner.info  { border-color: rgba(67, 48, 117, .30); background: var(--lavanda-whisper); color: var(--ink); }

  /* ---- os estados vazios ---- */
  html .empty,
  html .loading {
    padding: 28px 18px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-style: normal;
  }

  /* ---- a pilha (badge/selo): uma só, com as vozes do sistema ---- */
  html .badge, html .selo {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
    vertical-align: middle;
    background: var(--paper-deep);
    color: var(--ink-mute);
    border: 1px solid transparent;
  }
  html .badge.ok,    html .selo.ok    { background: rgba(90, 125, 87, .12);  color: var(--sage); }
  html .badge.warn,  html .selo.warn  { background: rgba(184, 115, 51, .12); color: var(--amber); }
  html .badge.err,   html .selo.err,
  html .badge.danger,html .selo.danger{ background: rgba(169, 51, 46, .10);  color: var(--danger); }
  html .badge.brand, html .selo.brand { background: var(--menta, #e3efe9);  color: var(--verde-texto-forte, #1a6f58); border-color: var(--menta-linha, #cfe3d9); }
}

/* =================================================================================================
 * OS ÍCONES DO MENU
 *
 * Trocados de emoji para os do Lucide — o mesmo conjunto que o app da Allogia usa. O que muda na
 * tela: eles herdam a cor do item (`currentColor`), então acompanham o estado (cinza em repouso,
 * roxo no ativo) em vez de ficarem coloridos por conta própria; têm todos o mesmo peso de traço,
 * então nenhum salta mais que o outro sem motivo; e são iguais no Windows do Wallace e no celular
 * da faxineira, o que emoji nunca é.
 * ============================================================================================= */

html .sn-item svg,
html .sn-item .seta svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke-width: 1.7;
  opacity: .78;
}
html .sn-item > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
html .sn-item.ativo svg { opacity: 1; }
html .sn-item .seta {
  display: inline-flex;
  align-items: center;
  transition: transform .16s ease;
}
html .sn-item .seta svg { width: 14px; height: 14px; opacity: .55; }
html .sn-item.aberto .seta { transform: rotate(90deg); }
html .sn-item .sn-rot { overflow: hidden; text-overflow: ellipsis; }

/* =================================================================================================
 * O CELULAR — porque quem mais abre este painel na rua é a faxineira, não o dono no monitor
 *
 * Conferido em 375px de largura depois da harmonia: duas coisas quebravam.
 *
 *   1. A linha de data ("SÁBADO, 05 DE SETEMBRO DE 2026 · BOA TARDE") é um flex de uma linha só,
 *      com letras espaçadas. No celular ela não cabia e era CORTADA no meio da palavra — a tela
 *      terminava em "BO". Texto cortado não é estilo, é informação perdida.
 *   2. O card de alerta põe o texto e o botão lado a lado. Em 375px o botão fica com metade da
 *      largura e o texto espreme numa coluna de três palavras: "364 hóspedes / sem CPF /
 *      registrado". Cabe, mas ninguém lê assim.
 *
 * A regra vale para as 29 telas de uma vez, como o resto do tema.
 * ============================================================================================= */

@media screen and (max-width: 560px) {
  /* A linha de data quebra em vez de cortar, e a régua some — ela é enfeite, o texto não. */
  html header .linha-data { flex-wrap: wrap; gap: 6px 12px; }
  html header .linha-data .quando { letter-spacing: .14em; }
  html header .linha-data .regua { display: none; }

  /* Alerta e ação empilham: o texto ganha a largura inteira, o botão vai para baixo dele.
   *
   * ⚠ O item da fila é uma GRADE de três colunas (tarja · miolo · lado), não um flex — eu tinha
   * escrito `flex-direction: column` num grid, que não faz nada, e o texto continuou espremido no
   * celular. Adivinhar o nome e o modelo de layout de um elemento e não conferir na tela é escrever
   * CSS que existe e não vale. Aqui a grade passa a ter a tarja em cima e o resto embaixo. */
  html .item-fila {
    grid-template-columns: 1fr;
  }
  html .item-fila .tarja { height: 3px; width: 100%; }
  html .item-fila .lado { justify-self: stretch; }
  html .item-fila .lado > a, html .item-fila .lado > button { width: 100%; text-align: center; }

  /* Um bloco de número por linha e meia, para o valor não encolher a ponto de sumir. */
  html .kpis, html .painel { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* =================================================================================================
 * O MENU, COPIADO DO APP DA ALLOGIA — o que fazia dezesseis itens virarem uma parede
 *
 * O Wallace mandou o print do `allogia.com.br/app/inbox` e disse: é isso que eu quero. Fui ler o
 * código do app dele (`web/src/components/app-sidebar.tsx`) em vez de imitar de olho. As cores já
 * eram as mesmas — a paleta do PMS foi copiada de lá antes. O que diferia era outra coisa:
 *
 *   1. ELE AGRUPA. O menu tem seções (OPERAÇÃO · CADASTROS · AJUSTES) com um rótulo miúdo em
 *      caixa alta. Dezesseis itens em lista corrida são uma parede; em cinco grupos de três, é um
 *      mapa. ⚠ Aqui os grupos foram postos NO LUGAR, sem reordenar: a ordem veio do painel da
 *      Stays de propósito, e mudá-la faria o Wallace procurar onde não está.
 *
 *   2. O ITEM ATIVO É UMA BARRINHA, não uma borda. Ele usa 2px × 16px, centrada na vertical, com o
 *      canto direito arredondado. O PMS usava `border-left: 3px` de altura inteira — que é a
 *      mesma listra que o detector do Impeccable reprovou nos cards, e pela mesma razão: uma fita
 *      colada na lateral em vez de um sinal desenhado.
 *
 *   3. RESPIRO. `px-4 py-6` na navegação e `gap-6` entre grupos, contra os 4px que havia aqui.
 * ============================================================================================= */

html .sn-itens { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 2px; }

html .sn-grupo {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 10px 6px;
  margin-top: 20px;
}
html .sn-grupo:first-child { margin-top: 2px; }

html .sn-item {
  position: relative;
  border-left: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--ink-mute);
}
html .sn-item:hover { background: var(--paper-deep); color: var(--ink); }

/* A barrinha do item ativo — 2px de largura, 16px de altura, centrada. */
html .sn-item.ativo {
  background: var(--menta, #e3efe9);
  color: var(--verde-texto-forte, #1a6f58);
  font-weight: 600;
  border-left: 0;
}
html .sn-item.ativo::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--verde-indicador, #2f9275);
}
html .sn-item.ativo svg { color: var(--verde-texto-forte, #1a6f58); opacity: 1; }

html .sn-sub { background: transparent; padding-left: 8px; }
html .sn-sub a { border-left: 0; border-radius: 7px; padding: 7px 10px 7px 34px; font-size: 13px; }
html .sn-sub a.ativo { background: var(--menta, #e3efe9); border-left: 0; }

/* As letras do corpo com os mesmos recursos tipográficos do app dele. */
html body { font-feature-settings: "ss01", "ss02", "cv11"; }

/* Os filtros do inbox: dois seletores à vista, na altura da busca. */
html .inbox-busca { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
html .inbox-busca input[type="search"] { flex: 1 1 150px; min-width: 0; }
html .filtro-sel {
  flex: 0 1 auto;
  max-width: 148px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
}
html .filtro-sel:focus-visible { outline: 2px solid var(--verde-texto, #1f7f65); outline-offset: 1px; }

/* Os filtros do inbox, na altura da busca. */
html .inbox-busca { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
html .inbox-busca input[type="search"] { flex: 1 1 140px; min-width: 0; }
html .filtro-sel {
  flex: 0 1 auto;
  max-width: 146px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
}
html .filtro-sel:focus-visible { outline: 2px solid var(--verde-texto, #1f7f65); outline-offset: 1px; }

/* A estadia no cabeçalho da conversa: clicável, discreta, com o código legível. */
html .chip-reserva {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--verde-texto-forte, #1a6f58);
  background: var(--menta, #e3efe9);
  border: 1px solid var(--menta-linha, #cfe3d9);
  border-radius: var(--radius-full);
  padding: 3px 11px;
  text-decoration: none;
  white-space: nowrap;
}
html .chip-reserva:hover { background: var(--menta-hover, #d5e8df); }

/* A caixa de resposta, agora que ela funciona. */
html .composer { background: var(--card); border-top: 1px solid var(--card-line); }
html .composer textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper-soft);
}
html .composer textarea:not(:disabled):focus-visible {
  outline: 2px solid var(--verde-texto, #1f7f65);
  outline-offset: 1px;
  background: var(--card);
}
html .composer #btn-enviar-conversa {
  background: var(--menta, #e3efe9);
  color: var(--verde-texto-forte, #1a6f58);
  box-shadow: inset 0 0 0 1px var(--menta-linha, #cfe3d9);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
/* Desabilitado precisa PARECER desligado e ainda assim ser legível: o branco sobre o cinza de
   borda dava 1,88:1, quase o rótulo sumindo. Mesmo fundo, tinta escura — 9,57:1. */
html .composer #btn-enviar-conversa:disabled { background: var(--line-strong); color: var(--ink); cursor: not-allowed; }
html .composer #btn-enviar-conversa:not(:disabled):hover { background: var(--menta-hover, #d5e8df); }

/* Refinamento local: pintura compartilhada; geometria pertence a cada tela. */
:root:root {
  --scroll-thumb: var(--line-strong);
  --scroll-track: var(--paper-soft);
  --scroll-hover: var(--ink-soft);
  --scroll-active: var(--verde-indicador, #2f9275);
}
html { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: auto; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
html th, html td { font-family: var(--font-sans); border-color: var(--line); }
html th { font-weight: 600; }
/* Nenhum fundo é aplicado à grade operacional: suas cores são dados. */
html body:not(:has(#calwrap)) .card table thead th { background-color: var(--paper-soft); color: var(--ink-mute); }
html label { font-family: var(--font-sans); font-weight: 500; }
html button, html input, html select, html textarea { font-family: var(--font-sans); }
html button { font-weight: 600; }
html button:not(:disabled) { cursor: pointer; }
html button:disabled, html input:disabled, html select:disabled, html textarea:disabled {
  cursor: not-allowed; opacity: 1; color: var(--ink-mute); background-color: var(--paper-deep); border-color: var(--line-strong);
}
html :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--verde-texto, #1f7f65); outline-offset: 3px;
}
html button:not(:disabled):active { filter: brightness(.94); }
html input:not(:disabled):hover, html select:not(:disabled):hover, html textarea:not(:disabled):hover { border-color: var(--line-strong); }
html input[aria-invalid="true"], html select[aria-invalid="true"], html textarea[aria-invalid="true"] { border-color: var(--danger); }
html .chip-success, html .kpi.ok b, html .kpi.ok .v, html .kpi.receita b, html .kpi.receita .v, html .stat.receita b, html .stat.done b { color: var(--sage-ink); }
html .chip-warn, html .kpi.amber b, html .kpi.amber .v, html .kpi.agenda b, html .kpi.agenda .v, html .stat.filtro b, html .item-fila .etiqueta { color: var(--amber-ink); }
html .item-fila.grave .etiqueta { color: var(--danger); }
/* A marca ganha presença no menu, com a área de trabalho no papel da ALLOGIA. */
html .sn-marca { color: var(--verde-texto-forte, #1a6f58); background: var(--menta, #e3efe9); border-bottom-color: var(--menta-linha, #cfe3d9); font-size: 24px; }
html .sn-marca span { color: var(--verde-texto-forte, #1a6f58); }
html .sn-grupo { font-size: 12px; letter-spacing: .09em; }
html .sn-item { font-size: 14px; }
html button.sn-item { width: 100%; margin: 0; text-align: left; font-family: var(--font-sans); border: 0; background: transparent; }
html button.sn-item:hover { background: var(--paper-deep); }
html button.sn-item.ativo { background: var(--menta, #e3efe9); }
html .sn-item.ativo, html .sn-sub a.ativo { background: var(--menta, #e3efe9); }
html .sn-badge { background: var(--menta, #e3efe9); color: var(--verde-texto-forte, #1a6f58); box-shadow: inset 0 0 0 1px var(--menta-linha, #cfe3d9); }
html .bt-titulo { font-size: 20px; }
html .bt-chip { white-space: normal; flex-wrap: wrap; }
html .pular-conteudo { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px; border-radius: var(--radius); background: var(--menta, #e3efe9); color: var(--verde-texto-forte, #1a6f58); box-shadow: inset 0 0 0 1px var(--menta-linha, #cfe3d9); }
html .pular-conteudo:focus { top: 12px; }
html .estado-rede { position: fixed; bottom: 16px; right: 16px; z-index: 75; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-soft); color: var(--ink); box-shadow: 0 4px 20px #1a16131a; font-size: 14px; }
@media (forced-colors: active) { html { scrollbar-color: auto; } html :focus-visible { outline-color: Highlight; } }
@media print { .pular-conteudo, .estado-rede { display: none !important; } }

html .sn-item.desab-topo { color: var(--ink-soft); }
html body:has(#form #senha) header h1 { color: var(--roxo); font-size: 30px; font-weight: 500; }
html body:has(#form #senha) .card h2 { font-size: 24px; font-weight: 500; }
html body:has(#form #senha) .demo { background: var(--paper-soft); border-color: var(--line-strong); }
html body:has(#form #senha) .demo .pw, html body:has(#form #senha) .demo .papel { font-size: 12px; }

/* V2 — direction visuelle renouvelée à la demande du client, 06/09/2026.
   Sidebar encre, surfaces blanches, accent bleu; géométrie du calendrier conservée. */
:root:root { --nav-bg:#142034; --nav-text:#C5D0E1; --nav-muted:#93A4BD; --nav-hover:#21324C; --nav-active:#2D65E8; }
html body { font-size:14px; line-height:1.5; letter-spacing:0; }
html h1,html h2,html h3,html h4 { font-family:var(--font-sans); font-weight:650; font-variation-settings:normal; letter-spacing:-.025em; }
html body:has(> .sidenav) { margin-left:252px; }
html .sidenav { width:252px; background:var(--nav-bg); color:var(--nav-text); border:0; scrollbar-color:#435572 var(--nav-bg); }
html .sn-marca { background:transparent; color:#fff; font-family:var(--font-sans); font-size:25px; font-weight:700; letter-spacing:-1px; padding:23px 24px 22px; border-bottom:1px solid #ffffff12; }
html .sn-marca span { color:#91B5FF; font-size:12px; font-weight:650; letter-spacing:1.3px; text-transform:uppercase; margin-left:8px; }
html .sn-itens { padding:18px 12px; gap:3px; }
html .sn-grupo { color:var(--nav-muted); font-size:12px; font-weight:600; letter-spacing:.06em; margin-top:20px; padding:0 12px 7px; }
html .sn-item,html button.sn-item { padding:10px 12px; min-height:42px; color:var(--nav-text); font-size:13px; font-weight:500; border-radius:7px; line-height:1.4; }
html .sn-item:hover,html button.sn-item:hover { background:var(--nav-hover); color:#fff; }
html .sn-item.ativo,html button.sn-item.ativo { background:var(--nav-active); color:#fff; font-weight:600; }
html .sn-item.ativo::before { display:none; }
html .sn-item svg,html .sn-item.ativo svg { width:18px; height:18px; color:currentColor; opacity:1; }
html .sn-item .sn-rot { white-space:normal; overflow:visible; text-overflow:clip; }
html .sn-item .seta { color:var(--nav-muted); }
html .sn-sub { padding:4px 0 6px 18px; background:transparent; }
html .sn-sub a { color:var(--nav-text); padding:9px 10px 9px 24px; font-size:13px; }
html .sn-sub a:hover { background:var(--nav-hover); color:#fff; }
html .sn-sub a.ativo { background:var(--nav-hover); color:#fff; box-shadow:inset 2px 0 #84ACFF; }
html .sn-item.desab-topo,html .sn-sub .desab { color:var(--nav-muted); font-style:normal; }
html .sn-extranet { color:var(--nav-text); border-top:1px solid #ffffff16; padding:17px 24px; }
html .sn-extranet:hover { background:var(--nav-hover); color:#fff; }
html .sn-badge { background:#E6EFFF; color:#1744A1; }
html .barra-topo { min-height:64px; background:#fff; padding:14px 32px; border-bottom:1px solid var(--line); }
html .bt-titulo { font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--ink-mute); letter-spacing:0; }
html .bt-chip { font-size:12px; gap:16px; color:var(--ink-soft); }
html .bt-chip a { text-decoration:none; border:1px solid var(--line); border-radius:6px; padding:5px 11px; color:var(--ink-mute); font-weight:500; }
html body:has(> .sidenav) > header { background:transparent; color:var(--ink); max-width:1680px; margin:0 auto; padding:30px 32px 18px; border:0; }
html body:has(> .sidenav) > header h1 { font-size:clamp(24px,2.3vw,32px); font-weight:650; line-height:1.2; color:var(--ink); letter-spacing:-.035em; }
html body:has(> .sidenav) > header .sub { font-size:14px; line-height:1.6; color:var(--ink-soft); margin-top:8px; }
html body:has(> .sidenav) > main { max-width:1680px; padding:8px 32px 40px; }
html .card,html .card-editorial { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 6px #18223504; overflow:clip; }
html .card h2 { font-family:var(--font-sans); font-size:15px; font-weight:650; color:var(--ink); padding:17px 20px; border-color:var(--line); }
html .card .body { padding:18px 20px; }
html button { border-radius:7px; font-size:13px; font-weight:600; transition:background-color .15s,border-color .15s; }
html button.ghost { background:#fff; color:var(--ink-mute); border:1px solid var(--line); }
html button.ghost:hover { background:var(--paper); border-color:var(--line-strong); color:var(--ink); }
html input,html select,html textarea { border-color:var(--line); border-radius:7px; color:var(--ink); background:#fff; }
html label { font-size:12px; color:var(--ink-mute); font-weight:550; letter-spacing:0; }
html th { font-size:12px; font-weight:650; color:var(--ink-soft); }
html td { font-size:13px; border-color:var(--line); }
html .card table thead th { background:var(--paper-soft); }
html .kpi,html .stat { border:1px solid var(--line); padding:19px 20px; border-radius:10px; box-shadow:0 2px 4px #18223503; }
html .kpi b,html .kpi .v,html .stat b { font-family:var(--font-sans); font-weight:650; letter-spacing:-.035em; font-variation-settings:normal; }
html .kpi b,html .kpi .v { font-size:clamp(19px,14cqi,30px); line-height:1.15; }
html .kpi span,html .kpi .r { color:var(--ink-soft); font-weight:500; margin-top:9px; }
html .kpi .s { font-size:12px; }
html .kpi.destaque,html .kpi.liquido { background:var(--menta,#e3efe9); border-color:var(--menta-linha,#cfe3d9); }
html .kpi.destaque b,html .kpi.destaque .v,html .kpi.liquido b,html .kpi.liquido .v { color:var(--verde-texto-forte,#1a6f58); }
html .kpi.destaque span,html .kpi.destaque .r,html .kpi.destaque .s,html .kpi.liquido span,html .kpi.liquido .r,html .kpi.liquido .s { color:var(--ink-mute); }
html .painel,html .kpis { gap:14px; }
html .abas { border-bottom:1px solid var(--line); gap:20px; margin-bottom:20px; }
html .aba { border-bottom-width:2px; padding:12px 2px; color:var(--ink-soft); font-size:14px; font-weight:500; }
html .aba:hover { background:transparent; color:var(--verde-texto,#1f7f65); }
html .aba.ativa { color:var(--verde-texto,#1f7f65); border-bottom-color:var(--verde-texto,#1f7f65); font-weight:650; }
html .banner { border-radius:8px; line-height:1.6; }
html .empty,html .loading { font-style:normal; padding:32px 20px; font-size:14px; }
/* Atendimento: a lista possui rolagem própria; a aba de envios mantém fluxo documental. */
html body:has(.inbox) > header { padding-top:24px; padding-bottom:12px; }
html body:has(.inbox) > main { padding-top:0; }
html #painel-conversas > .card { border-radius:4px; box-shadow:none; }
html #painel-conversas > .card > h2 { min-height:58px; padding:12px 20px; }
html #painel-conversas > .card > h2 .hint { font-size:12px; color:var(--ink-soft); }
html #btn-exemplo { font-size:12px; padding:6px 10px; font-weight:500; }
html .inbox { grid-template-columns:minmax(300px,360px) minmax(0,1fr); height:calc(100dvh - 288px); min-height:480px; }
html .inbox-lista,html .inbox-thread { min-height:0; }
html .inbox-busca { padding:16px; display:grid; grid-template-columns:1fr 1fr 36px; gap:8px; background:#fff; }
html .inbox-busca input[type=search] { grid-column:1/-1; width:100%; padding:11px 12px; font-size:13px; background:var(--paper); border-color:transparent; }
html .inbox-busca .filtro-sel { width:100%; max-width:none; font-size:12px; background:#fff; padding:7px 8px; }
html .inbox-busca .btn-filtro { padding:6px; }
html .lista-rolagem { padding:6px; background:#fff; }
html .conversa { border:0; border-radius:8px; margin:3px 0; padding:14px 10px; gap:11px; }
html .conversa:hover { background:var(--paper); }
html .conversa.sel { background:var(--menta,#e3efe9); box-shadow:inset 3px 0 var(--verde-texto,#1f7f65); }
html .conversa .nm { font-size:14px; font-weight:650; }
html .conversa .ctx { font-size:12px; margin-top:3px; }
html .conversa .previa { font-size:13px; margin-top:5px; }
html .conversa .hora { font-size:12px; }
html .av { width:40px; height:40px; border-radius:50%; font-size:13px; font-weight:600; }
html .thread-topo { background:#fff; padding:18px 24px; min-height:73px; }
html .thread-topo .nm { color:var(--ink); font-size:15px; font-weight:650; }
html .thread-corpo { padding:26px; background:#F7F9FC; }
html .bolha { max-width:78%; padding:13px 16px; font-size:14px; line-height:1.65; border-radius:12px; margin-bottom:16px; box-shadow:0 2px 3px #18223503; }
html .bolha.nossa { background:#E8F0FF; border-color:#D7E4FE; color:#172F5D; }
html .bolha.deles { background:#fff; border-color:var(--line); }
html .bolha .quando { font-size:12px; }
html .vazio-thread { gap:10px; max-width:420px; margin:auto; }
html .vazio-thread .ic { font-size:38px; opacity:1; }
html .composer { padding:16px 22px; }
html .composer textarea { min-height:72px; max-height:180px; resize:vertical; background:var(--paper-soft); padding:12px 14px; font:14px/1.6 var(--font-sans); }
html .composer #btn-enviar-conversa { padding:9px 22px; font-size:13px; }
html .composer .motivo { font-size:12px; line-height:1.5; }
html .faixa-exemplo { background:#FFF6DB; color:#79520F; border-color:#E8D7A9; }
html .conversa.exemplo,html .thread-corpo.exemplo { background:#FFFDF7; }
html .conversa.exemplo.sel { background:#FFF0C4; }
html .chip-reserva { background:var(--paper); color:var(--ink-mute); border-color:var(--line); padding:5px 10px; }
/* Entrada, sem reaproveitar o aspecto de relatório da primeira versão. */
html body:has(#form #senha) { background:var(--paper); }
html body:has(#form #senha) > header { background:var(--nav-bg); padding:24px 32px; }
html body:has(#form #senha) header h1 { color:#fff; font-family:var(--font-sans); font-size:25px; font-weight:700; }
html body:has(#form #senha) header .sub { color:var(--nav-text); }
html body:has(#form #senha) main { padding-top:56px; }
html body:has(#form #senha) .card { box-shadow:0 12px 40px #1420340C; border-radius:14px; }
html body:has(#form #senha) .card h2 { color:var(--ink); font-size:22px; font-weight:650; padding:24px 28px 18px; }
html body:has(#form #senha) .card .body { padding:20px 28px 28px; }
html body:has(#form #senha) .demo { background:#fff; }
@media(max-width:1100px) { html .inbox { grid-template-columns:300px minmax(0,1fr); } html .bt-chip { gap:8px; } }
@media(max-width:900px) {
 html body:has(> .sidenav) { margin-left:0; }
 html .barra-topo { min-height:58px; padding:12px 18px; }
 html body:has(> .sidenav) > header { padding:24px 18px 14px; }
 html body:has(> .sidenav) > main { padding:4px 18px 28px; }
 html .inbox { grid-template-columns:1fr; height:auto; min-height:0; }
 html .lista-rolagem { max-height:340px; }
 html .thread-corpo { min-height:300px; max-height:520px; }
 html .inbox-lista { border-right:0; }
 html .card .body { padding:16px; }
}
@media(max-width:560px) {
 html .bt-chip { max-width:180px; font-size:12px; justify-content:flex-end; }
 html .bt-titulo { font-size:13px; }
 html .card h2 { padding:14px 16px; }
 html .thread-corpo { padding:18px 12px; }
 html .bolha { max-width:92%; }
 html .composer { padding:14px; }
 html .aba { font-size:13px; }
 html .inbox-busca { grid-template-columns:1fr 1fr 36px; }
 html .thread-topo { padding:14px; }
 html #painel-conversas > .card > h2 .hint { display:none; }
}
@media print { html body:has(> .sidenav) { margin-left:0; } html body:has(> .sidenav) > main { max-width:none; padding:0; } html .card { box-shadow:none; } }

html .vazio-thread .ic { width:72px; height:72px; border:1px solid var(--line); border-radius:20px; background:#fff; display:grid; place-items:center; color:var(--roxo); margin-bottom:10px; }
html .vazio-thread .ic svg { width:30px; height:30px; }
html .vazio-titulo { color:var(--ink); font-size:20px; font-weight:600; letter-spacing:-.025em; }

/* Alerta operacional acrescentado pelo trabalho paralelo: permanece prioritário. */
html #sec-conflitos.card.alert{border:1px solid #e6b6b4;border-left:4px solid #b83232;background:#fff8f7}html #sec-conflitos.card.alert>h2{background:#fff0ee;color:#8c2525}html #sec-conflitos .count{background:#a83131;color:#fff}

/* Operação compacta — decisão de Wallace, 06/09. Tokens e pintura compartilhados;
   a largura, o cabeçalho fixo e os filetes informativos do calendário continuam locais. */
html body:has(> .sidenav){--radius:4px;--radius-lg:5px}
html body:has(> .sidenav) > header{padding:16px 20px 8px}
html body:has(> .sidenav) > main{padding:4px 20px 24px}
html body:has(> .sidenav) .barra-topo{min-height:48px;padding:9px 20px}
html body:has(> .sidenav) header h1{font-size:24px;line-height:1.25}
html body:has(> .sidenav) .card,html body:has(> .sidenav) .card-editorial{border-radius:4px;box-shadow:none;margin-bottom:12px}
html body:has(> .sidenav) .card h2{padding:10px 12px;border-bottom:0;font-size:14px}
html body:has(> .sidenav) .card .body{padding:10px 12px}
html body:has(> .sidenav) .kpi,html body:has(> .sidenav) .stat{border:0;border-radius:3px;padding:10px 12px;box-shadow:none;min-height:0}
html body:has(> .sidenav) .kpi .serie{display:none}
html body:has(> .sidenav) .kpi .serie::before{display:none}
html body:has(> .sidenav) .kpi span,html body:has(> .sidenav) .kpi .r{margin-top:4px}
html body:has(> .sidenav) .kpis,html body:has(> .sidenav) .painel{gap:8px;margin-bottom:12px}
html body:has(> .sidenav) .secao-titulo{margin:16px 0 8px}
html body:has(> .sidenav) header .linha-data{margin-bottom:8px}
html body:has(> .sidenav) header .datebar{margin-top:10px}
html body:has(> .sidenav) .item-fila{border:0;border-radius:4px;box-shadow:none;grid-template-columns:minmax(0,1fr) auto}
html body:has(> .sidenav) .item-fila .tarja{display:none}
html body:has(> .sidenav) .item-fila .miolo,html body:has(> .sidenav) .item-fila .lado{padding:10px 12px}
html body:has(> .sidenav) .item-fila .etiqueta{letter-spacing:.04em}
html body:has(> .sidenav) .item-fila .titulo{font-size:15px}
html body:has(> .sidenav) .item-fila .detalhe{font-size:13px}
html body:has(> .sidenav) button,html body:has(> .sidenav) input,html body:has(> .sidenav) select,html body:has(> .sidenav) textarea{border-radius:4px}
html body:has(> .sidenav) .abas{margin-bottom:12px;gap:16px}
html body:has(> .sidenav) .aba{padding-top:8px;padding-bottom:8px}
html body:has(> .sidenav) .banner{border-radius:4px;padding:8px 12px;margin-bottom:10px}
html body.tarefas-page .card{padding:12px}
html body.tarefas-page .card h2{margin-bottom:10px!important}
html body.tarefas-page .task-page-heading h1{font-size:24px!important}
html body.tarefas-page .sub{margin-bottom:12px}
html body.tarefas-page .f{gap:8px}
html.catalog-visual body:has(> .sidenav) > main{padding:16px 20px 24px!important}
html.catalog-visual .property-card{border-radius:4px;box-shadow:none}
html.catalog-visual .property-info{padding:12px 12px 0}
html.catalog-visual #lista{gap:14px}
html.catalog-visual .property-location{margin:6px 0 8px}
html.catalog-visual .property-foot{padding:8px 0}
html.catalog-visual .property-editor,html.catalog-visual .public-property,html.catalog-visual .studio-start,html.catalog-visual .studio-confirm{border-radius:5px}
html.catalog-visual .announcement-studio .col-editor{padding:12px}
html.catalog-visual .announcement-studio .sec{padding:14px!important}
html.catalog-visual .announcement-studio .campos{gap:12px}
html.catalog-visual .studio-start-body{padding:18px;gap:12px}
html body:has(> .sidenav) .inbox-busca{padding:10px;gap:6px}
html body:has(> .sidenav) .conversa{padding:10px 8px;margin:1px 0;border-radius:4px}
html body:has(> .sidenav) .thread-topo{padding:10px 14px;min-height:56px}
html body:has(> .sidenav) .thread-corpo{padding:14px}
html body:has(> .sidenav) .bolha{border-radius:5px;margin-bottom:10px;box-shadow:none}
html body:has(> .sidenav) .composer{padding:10px 12px}
html body:has(> .sidenav) .composer textarea{resize:none}
html body:has(> .sidenav) #painel-conversas > .card > h2{min-height:40px;padding:8px 12px}
html .thread-trabalho{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}
html .thread-trabalho > .thread-corpo{flex:1;min-height:0;max-height:none;overflow:auto}
html .inbox-pendencias{order:-1;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--card);font-size:13px;min-width:0}
html .inbox-pendencias[hidden]{display:none!important}
html .inbox-pendencias > summary{cursor:pointer;padding:9px 12px;font-weight:650;color:var(--ink);min-height:38px}
html #inbox-pendencias-count:not(:empty){padding:1px 6px;margin-left:5px;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);border-radius:3px;font-variant-numeric:tabular-nums}
html .pendencias-conteudo{padding:0 12px 12px;max-height:35vh;overflow:auto}
html .pendencias-conteudo p{margin:5px 0;font-size:13px;line-height:1.45}
html .pendencia-item{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
html .pendencia-item > strong{display:block;font-size:14px;line-height:1.35}
html .pendencia-item[data-prioridade=urgente] > strong{color:var(--danger)}
html .pendencia-meta{font-size:12px!important;color:var(--ink-mute)}
html .pendencia-descricao{white-space:pre-wrap}
html .pendencia-acoes{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:8px}
html .pendencia-acoes summary{cursor:pointer;min-height:36px;padding:6px 0;color:var(--roxo);font-weight:600}
html .pendencia-acoes details{flex:1;min-width:150px}
html .pendencia-acoes label{display:block;font-size:12px}
html .pendencia-acoes textarea{width:100%;min-height:88px;resize:none;padding:8px;margin:5px 0}
html .pendencia-acoes button{min-height:36px;font-size:12px;padding:7px 10px}
html #pendencias-status:empty,html #pendencias-ia:empty{display:none}
@media(min-width:1400px){
 html .thread-trabalho{display:grid;grid-template-columns:minmax(0,1fr) auto}
 html .inbox-pendencias{order:0;border-bottom:0;border-left:1px solid var(--line);width:240px;overflow:auto}
 html .inbox-pendencias:not([open]){width:120px}
 html .pendencias-conteudo{max-height:none}
}
@media(max-width:900px){
 html body:has(> .sidenav) > header{padding:12px 12px 8px}
 html body:has(> .sidenav) > main{padding:4px 12px 20px}
 html body:has(> .sidenav) .barra-topo{padding:8px 12px}
 html body:has(> .sidenav) header h1{font-size:21px}
 html body:has(> .sidenav) .item-fila{grid-template-columns:1fr}
 html body:has(> .sidenav) .item-fila .lado{padding-top:0;justify-content:flex-start}
 html body:has(> .sidenav) .item-fila .lado button{width:auto;min-height:40px}
 html .inbox-pendencias > summary{min-height:40px}
 html .pendencias-conteudo{max-height:28dvh}
 html.catalog-visual body:has(> .sidenav) > main{padding:12px!important}
}
/* Inbox: a conversa ocupa a área útil; cabeçalhos e fila legada saem da operação. */
html body.inbox-operador{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
html body.inbox-operador:not(.menu-aberto)>.sidenav{box-shadow:none}
html body.inbox-operador > header,html body.inbox-operador .abas[hidden]{display:none}
html body.inbox-operador > .barra-topo{flex-shrink:0;min-height:48px;padding:2px 8px;gap:4px}
html body.inbox-operador > .barra-topo .bt-titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.inbox-operador > .barra-topo .bt-chip{margin-left:0;font-size:0;gap:0;flex-shrink:0}
html body.inbox-operador > .barra-topo .bt-chip a{font-size:12px;min-height:36px;display:inline-flex;align-items:center}
html body.inbox-operador > main{flex:1;min-height:0;max-width:none;width:100%;padding:0;display:flex;flex-direction:column}
html body.inbox-operador #app,html body.inbox-operador #painel-conversas{flex:1;min-height:0;display:flex;flex-direction:column}
html body.inbox-operador #painel-conversas[hidden]{display:none}
html body.inbox-operador #painel-conversas > .card{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;border:0;border-radius:0}
html body.inbox-operador #painel-conversas > .card > h2{flex-shrink:0}
html body.inbox-operador .inbox{flex:1;min-height:0;height:auto}
html body.inbox-operador #aviso-conversas.info{display:none}
@media print { html body:has(> .sidenav) > main{padding:0!important;max-width:none} }

/* Controles sob demanda: espaço de trabalho primeiro, escolha do menu persistida. */
html body:has(>.sidenav){margin-left:0}
html .sidenav{transform:translateX(-100%);visibility:hidden}
html body.menu-aberto>.sidenav{transform:none;visibility:visible}
html .bt-menu{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:4px;flex-shrink:0}
@media(min-width:901px){
 html body.menu-aberto:has(>.sidenav){margin-left:252px}
 /* O desktop abre espaço para o menu; o véu pertence apenas ao drawer móvel. */
 html .sn-veu{display:none}
}
html body.inbox-operador #painel-conversas>.card>h2[hidden]{display:none}
html body.inbox-operador .inbox-busca{display:flex;flex-direction:column;gap:6px;padding:4px 8px;max-height:55%;overflow-y:auto}
html body.inbox-operador .inbox-busca[hidden]{display:none!important}
html .inbox-ferramentas{display:flex;align-items:center;gap:2px;flex-shrink:0;min-height:36px;width:auto}
html .controle-inbox{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;min-height:36px;padding:4px;border:0;border-radius:4px;position:relative}
html .controle-inbox.ativo,html .controle-inbox[aria-expanded=true]{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)}
html #filtros-ativos{position:absolute;top:0;right:0;min-width:14px;height:16px;padding:0 2px;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);border-radius:3px;font-size:12px;font-weight:700;line-height:16px}
html #painel-filtros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:6px;flex-shrink:0}
html #painel-busca{display:flex;align-items:center;gap:4px;flex-shrink:0;width:100%}
html #painel-busca input[type=search]{width:100%;min-width:0}
html #painel-busca input[type=search]::-webkit-search-cancel-button{display:none}
html #painel-filtros{width:100%}
html .inbox-busca .pop-canais{position:static;grid-column:1/-1;min-width:0;box-shadow:none;padding:8px}
html body.inbox-operador .conversa{padding:8px;margin:1px 0;border-radius:4px}
@media(max-width:900px){
 html .bt-menu,html .controle-inbox{min-width:44px;min-height:44px}
 html body.inbox-operador .inbox-busca input[type=search],html body.inbox-operador .inbox-busca .filtro-sel{font-size:16px;min-height:44px}
 html body.inbox-operador>.barra-topo{min-height:48px;padding:2px 8px;gap:4px}
 html body.inbox-operador>.barra-topo .bt-chip a{min-height:44px}
 html body.inbox-operador>main{padding:0}
 html body.inbox-operador #painel-conversas>.card{border:0;border-radius:0}
}

/* ─────────────────────────── ORDENAR PELO CABEÇALHO (pior primeiro) ───────────────────────────
   O comportamento mora UMA vez em /base.js; aqui está só o desenho, ligado pelo `data-ord` da
   <th>. Inerte onde o atributo não existe — o tema é carregado também por login.html e pelas
   site-*.html, e nenhuma delas ganha comportamento novo por causa disto.

   ⚠ `data-ord-inerte` é posto pela própria base na coluna que NÃO pode ser ordenada: `num` e
   `data` sem o `data-v` (valor cru) em todas as linhas, ou tabela com menos de duas linhas. Sem o
   valor cru a ordem sairia do texto exibido — 'R$ 1.234,56' como número, '05/12/2025' antes de
   '30/01/2026' — certa na aparência e errada no resultado. Cabeçalho que não ordena não convida
   ao clique: some o cursor e some a seta. */
html th[data-ord]:not([data-ord-inerte]) { cursor:pointer; user-select:none; }
html th[data-ord]:not([data-ord-inerte])::after { content:"↕"; opacity:.35; margin-left:5px; font-size:11px; }
html th[data-ord][aria-sort="descending"]::after { content:"↓"; opacity:1; }
html th[data-ord][aria-sort="ascending"]::after  { content:"↑"; opacity:1; }
html th[data-ord]:focus-visible { outline:2px solid var(--verde-texto,#1f7f65); outline-offset:-2px; }

/* Detalhes da conversa reutilizam o espaço auxiliar; nada abre ao entrar no chat. */
html .abrir-cotacao{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;flex-shrink:0;margin-left:auto;font-size:12px;padding:6px 8px}
html .inbox-cotacao{min-width:0;min-height:0;background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column}
html .inbox-cotacao[hidden]{display:none!important}
html .cotacao-topo{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 10px;border-bottom:1px solid var(--line);flex-shrink:0}
html .cotacao-topo strong{font-size:14px;font-weight:650}
html .cotacao-conteudo{min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px 12px;font-size:13px}
html .cotacao-conteudo h3{font-size:14px;font-weight:650;margin:0 0 8px}
html .cotacao-conteudo p{margin:6px 0;overflow-wrap:anywhere}
html .cotacao-ficha{margin:8px 0 10px}
html .cotacao-ficha>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:8px;padding:7px 0;border-bottom:1px solid var(--line);align-items:start}
html .cotacao-ficha dt{color:var(--ink-soft);font-size:12px}
html .cotacao-ficha dd{margin:0;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html .cotacao-ficha dd a{color:var(--roxo);text-decoration:underline}
html .cotacao-nota{font-size:12px;color:var(--ink-soft);line-height:1.45}
html .cotacao-valores,html #cotacao-simulacao,html #cotacao-oferta{margin-top:18px}
html .cotacao-campos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
html .cotacao-campos label{display:block;font-size:12px;margin-bottom:4px}
html .cotacao-campos input{width:100%;min-width:0;padding:7px 8px;min-height:36px;border:1px solid var(--line);font-size:14px;color:var(--ink);background:var(--card)}
html .cotacao-campos input[aria-invalid=true]{border-color:var(--danger)}
html #cotacao-calcular,html #cotacao-atualizar{min-height:36px;font-size:12px}
html #cotacao-calcular{width:100%}
html #cotacao-erro{color:var(--danger);font-size:12px}
html #cotacao-resultado{font-size:18px;font-weight:650;font-variant-numeric:tabular-nums}
html #cotacao-erro:empty,html #cotacao-status:empty,html #cotacao-resultado:empty,html #cotacao-calculo-origem:empty,html #cotacao-avisos:empty{display:none}
html .cotacao-link{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:12px;border:1px solid var(--line);border-radius:4px;text-decoration:underline;color:var(--roxo);font-size:13px}
html .cotacao-link:hover{background:var(--menta-hover,#d5e8df);color:var(--verde-texto-forte,#1a6f58)}
html .thread-trabalho.cotacao-aberta>.inbox-pendencias{display:none!important}
@media(min-width:901px){
 html .thread-trabalho.cotacao-aberta{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,35%)}
}
@media(max-width:900px){
 html #painel-conversas .thread-topo:has(.abrir-cotacao){grid-template-columns:44px 32px minmax(0,1fr) 44px}
 html #painel-conversas .thread-topo .abrir-cotacao{grid-column:4;grid-row:1/3;width:44px;min-height:44px;padding:0;margin:0}
 html .abrir-cotacao>span{display:none}
 html .thread-trabalho.cotacao-aberta>.thread-corpo,html .thread-trabalho.cotacao-aberta+.composer{display:none!important}
 html .inbox-cotacao{flex:1;border-left:0}
 html .cotacao-campos input{font-size:16px;min-height:44px}
 html #cotacao-calcular,html #cotacao-atualizar,html .cotacao-link{min-height:44px}
}

/* Preferência do operador. Aparencia.js aplica antes da primeira pintura; impressão permanece clara.
   A paleta muda, sem filtros sobre fotos/gráficos nem alterações da geometria por tela. */
:root:root{color-scheme:light;--action-bg:#e3efe9;--action-ink:#1a6f58;--danger-soft:#fce8ec;--success-soft:#e4f4ec;--surface:var(--card);--fundo2:var(--paper-soft);--linha:var(--line);--linha2:var(--line);--maintenance-ink:#6b21a8;--maintenance-soft:#f3e8ff}
html .aparencia-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:36px;min-height:36px;padding:6px 9px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font:500 12px/1.2 var(--font-sans);letter-spacing:0;text-transform:none;box-shadow:none;flex-shrink:0}
html .aparencia-botao:hover{background:var(--paper-deep)}
html .aparencia-botao .aparencia-icone{width:16px;height:16px;flex:0 0 16px;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:inherit}
html .aparencia-icone:before{content:'';display:block;width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
html .aparencia-icone[data-aparencia-icone=dark]:before{border:0;width:14px;height:14px;box-shadow:inset -5px -2px 0 currentColor;transform:rotate(-20deg)}
html .aparencia-icone[data-aparencia-icone=light]{position:relative}
html .aparencia-icone[data-aparencia-icone=light]:after{content:'';position:absolute;width:2px;height:2px;border-radius:50%;background:transparent;box-shadow:0 -8px currentColor,0 8px currentColor,8px 0 currentColor,-8px 0 currentColor,6px 6px currentColor,-6px -6px currentColor,6px -6px currentColor,-6px 6px currentColor}
html [data-aparencia-cabecalho]>.aparencia-botao{margin-top:10px}
html .htop[data-aparencia-cabecalho]>.aparencia-botao{margin-top:0}
html .sn-marca .aparencia-botao{display:flex;width:100%;margin-top:12px;background:var(--nav-hover);border-color:transparent;color:var(--nav-text);justify-content:flex-start}
html .sn-marca .aparencia-botao:hover{background:var(--nav-active);color:#fff}
html .sn-marca .aparencia-botao span{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:inherit;margin:0}
html .sn-item svg,html .sn-item.ativo svg{width:16px;height:16px}
html body:has(>.sidenav) button.bt-menu{background:transparent;color:var(--ink);border:0}
html body:has(>.sidenav)>header .toolbar label{color:var(--ink-mute)}
html body:has(>.sidenav)>header .toolbar input{color:var(--ink)}
html body:has(>.sidenav)>header .toolbar input::placeholder{color:var(--ink-soft);opacity:1}
@media(max-width:900px){html .aparencia-botao{min-width:44px;min-height:44px}}
@media print{html .aparencia-botao{display:none!important}html{color-scheme:light!important}}
@media screen{
 :root:root[data-theme=dark]{
  color-scheme:dark;--action-bg:#2563eb;--action-ink:#fff;--paper:#11151c;--paper-deep:#253041;--paper-soft:#1d2633;--card:#181e27;--card-line:#344154;
  --ink:#edf2fa;--ink-mute:#bec9d9;--ink-soft:#a5b4ca;--line:#344154;--line-strong:#63758e;
  --roxo:#91b4ff;--roxo-hover:#b5ccff;--roxo-deep:#b7cfff;--lavanda:#91b4ff;--lavanda-soft:#233b60;--lavanda-whisper:#1b2b44;
  --gold:#edc56f;--gold-soft:#352d1d;--sage:#80d8ab;--sage-ink:#90ddb3;--amber:#efc166;--amber-ink:#f2ca78;--danger:#ff8497;
  --danger-soft:#3c222c;--success-soft:#20382d;--nav-bg:#0c1016;--nav-text:#d4dfef;--nav-muted:#9cabc2;--nav-hover:#202c3e;--nav-active:#245ccc;--maintenance-ink:#ddb5ff;--maintenance-soft:#342346;
  --condbg:#172f28;--restrbg:#342131;--minbg:#202b40;--basebg:#302a1d;--stays:#9dc7ef;--staysl:#1e354a;
  --warnbg:var(--gold-soft);--warnbd:#7c6536;--errbg:var(--danger-soft);--errbd:#8e4b5a;--okbg:var(--success-soft);--okbd:#46785e;--livre:#233c30;--livrebd:#437d5b;--bloq:#354054;
 }
 html[data-theme=dark] :is(.barra-topo,.card,.card-editorial,.inbox-busca,.lista-rolagem,.thread-topo,.bolha.deles,.saldo,.fbloco,.pop,.modal,.dlg,.dialog,.drawer,.box,.login-box,.demo,.editor-top,.secnav,.tbl,.detalhes-reserva){background-color:var(--card);color:var(--ink);border-color:var(--line);box-shadow:none}
 html[data-theme=dark] :is(input,select,textarea){background-color:var(--paper-soft);color:var(--ink);border-color:var(--line-strong);caret-color:var(--ink)}
 html[data-theme=dark] :is(input,textarea)::placeholder{color:var(--ink-soft);opacity:1}
 html[data-theme=dark] option{background:var(--card);color:var(--ink)}
 html[data-theme=dark] input[type=checkbox],html[data-theme=dark] input[type=radio]{accent-color:var(--action-bg)}
 /* Primárias mantêm tinta branca sobre azul; --roxo é a tinta clara dos links. */
 html[data-theme=dark] button{background-color:var(--action-bg);color:var(--action-ink)}
 html[data-theme=dark] :is(button.ghost,.btn,.navbtn,.filtros button,.busca button,.btn-maisf,.btn-limpaf,.pager button,.lbl .exp,.lbl .mais,.mcal .mtit button){background:var(--card);color:var(--ink);border-color:var(--line-strong)}
 html[data-theme=dark] :is(button.ghost,.btn,.navbtn,.filtros button,.busca button,.btn-maisf,.btn-limpaf,.pager button):hover{background:var(--paper-deep);color:var(--ink)}
 html[data-theme=dark] :is(.navbtn.primary,.btn.primary,.btn.primario,.btn-primary,.btn.acao,.kpi.destaque,.kpi.liquido,.md.ponta){background:var(--action-bg);color:var(--action-ink);border-color:var(--action-bg)}
 html[data-theme=dark] .composer #btn-enviar-conversa{background:var(--action-bg);color:var(--action-ink)}
 html[data-theme=dark] :is(.kpi.destaque,.kpi.liquido) :is(b,.v,.r,.s,span){color:var(--action-ink)}
 html[data-theme=dark] :is(button.perigo,.btn-cancel){background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
 html[data-theme=dark] :is(.bt-menu,.sn-item,.item,.conversa,.md){background:transparent;color:var(--ink)}
 html[data-theme=dark] .sidenav .sn-item{color:var(--nav-text)}
 html[data-theme=dark] .sidenav .sn-item:hover{background:var(--nav-hover)}
 html[data-theme=dark] .sidenav .sn-item.ativo{background:var(--nav-active);color:#fff}
 html[data-theme=dark] :is(.conversa,.item):hover{background:var(--paper-soft)}
 html[data-theme=dark] :is(.conversa.sel,.item.sel){background:var(--lavanda-soft)}
 html[data-theme=dark] .thread-corpo{background:var(--paper)}
 html[data-theme=dark] .bolha.nossa{background:var(--lavanda-whisper);color:var(--ink);border-color:var(--lavanda-soft)}
 html[data-theme=dark] .bolha.deles{background:var(--card)}
 html[data-theme=dark] .vazio-thread .ic{background:var(--card)}
 html[data-theme=dark] :is(.conversa.exemplo,.thread-corpo.exemplo,.faixa-exemplo){background:var(--gold-soft);color:var(--amber-ink)}
 html[data-theme=dark] .conversa.exemplo.sel{background:#483d23}
 html[data-theme=dark] #filtros-ativos{background:var(--action-bg);color:var(--action-ink)}
 html[data-theme=dark] :is(.toolbar2,.filtros,.acesso-aviso,.periodo-hint,.stat.filtro,.chip,.pill,.pill[style],.filtro-sel,.canal-chip,.canal-chip.ok,.canal-chip.falta){background-color:var(--paper-soft)!important;color:var(--ink-mute)!important;border-color:var(--line)!important}
 /* A regra acima pinta .chip genérico com a MESMA especificidade (0,3,1) desta aqui — sem repetir
    esse número exatamente, as variantes de chip (Status Chip: sucesso/alerta/perigo) saem todas
    com a cor cinza genérica em dark mode, indistinguíveis entre si. Comprovado ao vivo. */
 html[data-theme=dark] .chip-success.chip{background-color:rgba(90,125,87,.16)!important;color:var(--sage)!important;border-color:var(--sage)!important}
 html[data-theme=dark] .chip-warn.chip{background-color:rgba(184,115,51,.16)!important;color:var(--amber)!important;border-color:var(--amber)!important}
 html[data-theme=dark] .chip-danger.chip{background-color:rgba(189,53,66,.16)!important;color:var(--danger)!important;border-color:var(--danger)!important}
 html[data-theme=dark] .chip-brand.chip{background-color:var(--lavanda-soft)!important;color:var(--lavanda)!important;border-color:var(--lavanda)!important}
 html[data-theme=dark] :is(.banner,.banner[style]){background-color:var(--paper-soft)!important;color:var(--ink)!important;border-color:var(--line-strong)!important}
 html[data-theme=dark] :is(.banner.err,.banner.alerta,.banner.warn,.alert,.periodo-hint){background-color:var(--danger-soft)!important;color:var(--ink)!important}
 html[data-theme=dark] :is(.b-pendente,.badge.warn,.selo.warn,.conta-repasse_proprietario){background:var(--gold-soft);color:var(--amber-ink);border-color:var(--amber-ink)}
 html[data-theme=dark] :is(.b-confirmada,.badge.ok,.selo.ok,.selo-ativa){background:var(--success-soft);color:var(--sage-ink);border-color:var(--sage-ink)}
 html[data-theme=dark] :is(.badge.err,.badge.danger,.selo.err,.selo.danger,.b-cancelada){background:var(--danger-soft);color:var(--danger)}
 html[data-theme=dark] :is(tr.mesmodia td,tr.match td){background:var(--gold-soft)}
 html[data-theme=dark] tbody tr:hover td{background-color:var(--paper-soft)}
 html[data-theme=dark] :is(.muted,.mut,.sub,.hint){color:var(--ink-mute)}
 html[data-theme=dark] :is(button,input,select,textarea):disabled{background-color:var(--paper-deep);color:var(--ink-soft);border-color:var(--line);opacity:1}
 html[data-theme=dark] #sec-conflitos.card.alert{background:var(--danger-soft);border-color:var(--danger)}
 html[data-theme=dark] #sec-conflitos.card.alert>h2{background:transparent;color:var(--danger)}
 /* Calendário: mudam os neutros e fundos de faixas; as cores que identificam reservas permanecem. */
 html[data-theme=dark] :is(.row,.row.sub,.track .col){border-color:var(--line)}
 html[data-theme=dark] :is(.ghead .day.wknd,.track .col.wknd){background:var(--paper-soft)}
 html[data-theme=dark] .grow{background:var(--paper-deep);color:var(--ink)}
 html[data-theme=dark] .grow:hover{background:var(--lavanda-soft)}
 html[data-theme=dark] :is(.grow .qtd,.row .lbl,.lbl .mini){background:var(--card);color:var(--ink)}
 html[data-theme=dark] .bar.ok{background:var(--action-bg);color:#fff}
 html[data-theme=dark] .md:hover{background:var(--lavanda-soft)}
 /* Catálogo e estúdio têm componentes próprios; fotos e prévia ampliada não sofrem inversão. */
 html[data-theme=dark].catalog-visual :is(.property-card,.property-editor,.public-property,.studio-start,.studio-confirm,.gallery-empty,.studio-workspace,.catalog-help,.photo-editor-grid tr[data-foto]){background:var(--card);color:var(--ink);border-color:var(--line)}
 html[data-theme=dark].catalog-visual :is(.announcement-studio,.announcement-studio #edSecnav,.announcement-studio .acoes-sec,.studio-orientation,.studio-feedback,.studio-room-extras,.studio-preview-empty,.public-preview){background:var(--paper-soft);color:var(--ink-mute);border-color:var(--line)}
 html[data-theme=dark].catalog-visual :is(.property-cover,.photo-editor-open){background:var(--paper-deep)!important;color:var(--ink-mute)}
 html[data-theme=dark].catalog-visual :is(.catalog-intro h1,.portfolio-number strong,.property-title,.public-property-body h2,.announcement-studio .sec>h3){color:var(--ink)!important}
 html[data-theme=dark].catalog-visual :is(.intro-description,.portfolio-number span,.catalog-intro .eyebrow,.property-meta,.property-location,.property-foot,.gallery-pages,.gallery-empty p,.editor-top>span,.readiness-details>summary,.catalog-help>summary,.public-property-bottom,.studio-start-body p,.studio-confirm p,.studio-divider,.studio-charcount,.studio-step-number,.studio-room-amenities p,.studio-room-extras summary,.photo-editor-grid td:has(input):before){color:var(--ink-mute)}
 html[data-theme=dark].catalog-visual :is(.property-status,.studio-cover-label){color:var(--sage-ink)}
 html[data-theme=dark].catalog-visual :is(.property-status.inactive,.property-arrow){color:var(--ink-mute)}
 html[data-theme=dark].catalog-visual :is(.property-foot,.catalog-intro,.studio-navigation,.readiness-details){border-color:var(--line)}
 html[data-theme=dark].catalog-visual .announcement-studio #edSecnav button{background:transparent;color:var(--ink-mute)}
 html[data-theme=dark].catalog-visual .announcement-studio #edSecnav button.ativa{background:var(--lavanda-soft)!important;color:var(--ink)!important}
 html[data-theme=dark].catalog-visual .announcement-studio #edSecnav button.ativa .studio-step-number{color:var(--ink)}
 html[data-theme=dark].catalog-visual .announcement-studio :is(input,select,textarea){background:var(--card);color:var(--ink);border-color:var(--line-strong)}
 html[data-theme=dark].catalog-visual .studio-feedback.err{background:var(--danger-soft);color:var(--danger)}
 html[data-theme=dark].catalog-visual .studio-feedback.ok{background:var(--success-soft);color:var(--sage-ink)}
 html[data-theme=dark] .aparencia-botao{background:var(--card);color:var(--ink);border-color:var(--line)}
 html[data-theme=dark] .sn-marca .aparencia-botao{background:var(--nav-hover);color:var(--nav-text)}
 html[data-theme=dark].calendar-readable :is(.calendar-card .toolbar,.calendar-card .toolbar2,.ghead .corner,.ghead .day,.ghead .day.wknd,.row,.row .lbl,.row.sub .lbl,.row.glob .lbl,.grow,.calendar-inspector,.calendar-gesture-help,.calendar-legend){background:var(--card);color:var(--ink);border-color:var(--line)}
 html[data-theme=dark].calendar-readable :is(.ghead .corner,.ghead .day.wknd,.grow,.calendar-inspector){background:var(--paper-soft)}
 html[data-theme=dark].calendar-readable :is(.row .lbl .code,.calendar-inspector strong){color:var(--ink)}
 html[data-theme=dark].calendar-readable :is(.calendar-guide,.calendar-view-controls label,.grow .cid){color:var(--ink-mute)}
 html[data-theme=dark].calendar-readable .row:hover:not(.sub) :is(.lbl,.track){background:var(--paper-soft)}
 html[data-theme=dark].calendar-readable .track .col.wknd{background:#8397b00d}
 html[data-theme=dark].calendar-readable .row.sub .track[style*="background"]{background:var(--paper-soft)!important}
 html[data-theme=dark].calendar-readable .ghead .day.is-today{background:var(--action-bg);color:#fff}
 html[data-theme=dark].calendar-readable .bar.ok{background:#315fa0}
 html[data-theme=dark].calendar-readable pre[style]{background:var(--card)!important;color:var(--ink);border-color:var(--line)!important}
 html[data-theme=dark] .avaliacoes-page .marca{background:var(--gold-soft);color:var(--amber-ink)}
 html[data-theme=dark] .avaliacoes-page #abas button[aria-selected=true]{background:var(--action-bg);color:var(--action-ink)}
 html[data-theme=dark].catalog-visual .toolbar :is(input,select),html[data-theme=dark].calendar-readable .calendar-card .toolbar :is(input,select){background:var(--card);color:var(--ink);border-color:var(--line-strong)}
 html[data-theme=dark].catalog-visual .announcement-studio code{background:var(--paper-deep);color:var(--ink)}
 html[data-theme=dark].catalog-visual .announcement-studio .sec>.sub{color:var(--ink-mute)}
 html[data-theme=dark].catalog-visual :is(.compl,.legenda){background:var(--card);color:var(--ink-mute);border-color:var(--line)}
 html[data-theme=dark].catalog-visual .editor-exit{background:var(--gold-soft);color:var(--amber-ink)}
 html[data-theme=dark].catalog-visual .canal-chip ul{color:var(--amber-ink)}
 html[data-theme=dark].catalog-visual .barra{background:var(--line)}
 html[data-theme=dark] :is(.nota-dep,.badge.pendente){background:var(--gold-soft);color:var(--amber-ink);border-color:var(--warnbd)}
 html[data-theme=dark] :is(.conta-caixa,.b-em_andamento,.dia .minn){background:var(--lavanda-soft);color:var(--roxo-deep);border-color:var(--line)}
 html[data-theme=dark] :is(.conta-taxa_gateway,.badge.recusada){background:var(--danger-soft);color:var(--danger);border-color:var(--errbd)}
 html[data-theme=dark] :is(.conta-comissao_agencia,.b-concluida,.repfinal,.badge.lancada){background:var(--success-soft);color:var(--sage-ink);border-color:var(--okbd)}
 html[data-theme=dark] .repfinal .lb{color:var(--sage-ink)}
 html[data-theme=dark] :is(.dia,.barra-acao){background:var(--card);color:var(--ink);border-color:var(--line)}
 html[data-theme=dark] .dia.vazio{background:transparent}
 html[data-theme=dark] .dia.esp{background:var(--lavanda-soft)}
 html[data-theme=dark] .dia.pad .preco{color:var(--ink-mute)}
 html[data-theme=dark] .err{color:var(--danger)}
 html[data-theme=dark] .stat.alerta{background:var(--danger-soft);color:var(--danger)}
 html[data-theme=dark] .stat.done{background:var(--success-soft);color:var(--sage-ink)}
 html[data-theme=dark] .busca input[type=search]{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
 html[data-theme=dark] .chip.ligado .n{background:var(--card);color:var(--ink)}
 html[data-theme=dark] .card h2 .badge-v2{background:var(--action-bg);color:var(--action-ink)}
}
/* Cadastro de acomodações: galeria visual e etapas no editor canônico. */
html.catalog-visual .studio-upload-zone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px;border:1px dashed var(--line,#ccd5e3);border-radius:6px;background:var(--paper-soft,#f5f7fb);margin:12px 0}
html.catalog-visual .studio-upload-zone span{font-size:13px;color:var(--ink-mute,#52647c)}
html.catalog-visual .studio-photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:14px 0}
html.catalog-visual .studio-photo-card{min-width:0;border:1px solid var(--line,#d8e0ed);border-radius:6px;background:var(--card,#fff);overflow:hidden}
html.catalog-visual .studio-photo-card .photo-editor-preview{height:190px;background:var(--paper-soft,#f5f7fb);display:grid;place-items:center;padding:0}
html.catalog-visual .studio-photo-card .photo-editor-open{width:100%;height:100%;border:0;padding:0;border-radius:0;background:transparent;display:block}
html.catalog-visual .studio-photo-card .photo-editor-open img{width:100%;height:100%;object-fit:cover;display:block}
html.catalog-visual .studio-photo-fields{padding:12px;display:grid;gap:10px}
html.catalog-visual .studio-photo-fields label{display:grid;gap:4px;font-size:12px;font-weight:600}
html.catalog-visual .studio-photo-fields input{width:100%;box-sizing:border-box;min-width:0;padding:8px;border:1px solid var(--line,#d8e0ed);border-radius:4px;background:var(--card,#fff);color:var(--ink,#182235)}
html.catalog-visual .studio-photo-fields details{font-size:12px;color:var(--ink-mute,#52647c)}
html.catalog-visual .studio-photo-fields details>label{margin-top:8px}
html.catalog-visual .studio-photo-actions{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
html.catalog-visual .studio-photo-actions .studio-cover-label{flex-basis:100%;padding:6px 0;font-size:11px}
html.catalog-visual .studio-photo-actions .btn{font-size:12px}
html.catalog-visual .studio-substeps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
html.catalog-visual .studio-substeps [aria-current=page]{border-color:var(--menta-linha,#cfe3d9);color:var(--verde-texto-forte,#1a6f58);background:var(--menta,#e3efe9)}
html.catalog-visual .studio-upload-status:empty{display:none}
html.catalog-visual .studio-upload-status{font-size:13px;padding:8px 0}
html.catalog-visual .studio-upload-status progress{width:100%;height:8px;accent-color:var(--verde-indicador,#2f9275)}
html.catalog-visual .studio-source-note,html.catalog-visual .studio-price-link{padding:14px;background:var(--paper-soft,#f5f7fb);border:1px solid var(--line,#d8e0ed);border-radius:6px;margin-bottom:16px;color:var(--ink-mute,#52647c)}
html.catalog-visual .studio-price-link h3{margin:0;color:var(--ink,#182235)}
html.catalog-visual .announcement-studio .studio-navigation{position:static}
@media(max-width:650px){html.catalog-visual .studio-photo-gallery{grid-template-columns:1fr}html.catalog-visual .studio-photo-card .photo-editor-preview{height:240px}html.catalog-visual .studio-photo-card input{font-size:16px}html.catalog-visual .studio-photo-card button,html.catalog-visual .studio-substeps button{min-height:44px}html.catalog-visual .studio-upload-zone{align-items:stretch}html.catalog-visual .studio-upload-zone>button{width:100%}}

/* Operação de anúncios: navegação familiar por local e por unidade. */
html.catalog-operacional .catalog-intro{padding:16px 0;align-items:center}
html.catalog-operacional .catalog-intro .eyebrow,html.catalog-operacional .portfolio-number{display:none}
html.catalog-operacional .catalog-intro h1{font-size:24px;letter-spacing:0}
html.catalog-operacional .catalog-views{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
html.catalog-operacional .catalog-views [aria-pressed=true]{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);border-color:var(--menta-linha,#cfe3d9)}
html.catalog-operacional .property-card{display:grid;grid-template-columns:180px 1fr;border-radius:5px;box-shadow:none}
html.catalog-operacional #lista{display:grid;grid-template-columns:1fr;gap:12px}
html.catalog-operacional .property-cover{aspect-ratio:4/3;min-height:135px}
html.catalog-operacional .property-info{padding:15px 20px}
html.catalog-operacional .property-title{font-size:18px}
html.catalog-operacional .catalog-local{border:1px solid var(--line);background:var(--card);padding:20px;border-radius:5px}
html.catalog-operacional .catalog-local h2{font-size:19px;margin:0}
html.catalog-operacional .catalog-local-cab{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
html.catalog-operacional .catalog-local-cab>.btn{margin-left:auto}
html.catalog-operacional .catalog-local-unidades{display:flex;flex-direction:column;gap:8px;margin-top:16px}
html.catalog-operacional .catalog-local-unidades .item{width:100%}
html.catalog-operacional .prontidao-conteudo{border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:16px;background:var(--card);color:var(--ink)}
html.catalog-operacional .prontidao-conteudo[hidden]{display:none}
html.catalog-operacional .prontidao-conteudo h3{margin:0 0 8px;color:var(--ink)}
html.catalog-operacional .prontidao-rotulo{font-size:12.5px;font-weight:600;margin:14px 0 8px;color:var(--ink-mute)}
html.catalog-operacional .prontidao-rotulo-bloqueio{color:var(--danger)}
html.catalog-operacional .prontidao-rotulo-recomendacao{color:var(--verde-texto-forte,#1a6f58)}
html.catalog-operacional .prontidao-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:6px;padding:10px 12px;margin-bottom:8px}
html.catalog-operacional .prontidao-item strong{color:var(--ink)}
html.catalog-operacional .prontidao-item p{margin:2px 0 0;font-size:12.5px;color:var(--ink-mute)}
html.catalog-operacional .prontidao-bloqueio{background:var(--danger-soft);border:1px solid var(--danger)}
html.catalog-operacional .prontidao-recomendacao{background:var(--menta,#e3efe9);border:1px solid var(--menta-linha,#cfe3d9)}
html.catalog-operacional .prontidao-resumo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
html.catalog-operacional .prontidao-resumo li{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:2px 0;color:var(--ink)}
/* !important: .studio-feedback já tem regra própria (inline em catalogo.html) e outra específica de
   tema escuro em tema.css (:is(...) com a mesma especificidade), ambas WINNING por ordem de cascata
   em telas reais — comprovado ao vivo, não suposição. Sem !important aqui o pill de "não salvo"
   nunca aparece. */
html.catalog-operacional .studio-feedback[data-estado="sujo"]{display:inline-flex!important;background:var(--gold-soft)!important;color:var(--amber-ink)!important;border-radius:var(--radius-full)!important;padding:4px 10px!important;font-size:12px!important;font-weight:600!important}
html.catalog-operacional .studio-feedback.ok{display:inline-flex!important;background:var(--success-soft)!important;color:var(--sage-ink)!important;border-radius:var(--radius-full)!important;padding:4px 10px!important;font-size:12px!important;font-weight:600!important}
html.catalog-operacional .studio-feedback.err{display:inline-flex!important;background:var(--danger-soft)!important;color:var(--danger)!important;border-radius:6px!important;padding:8px 12px!important;font-size:13px!important;font-weight:500!important}
@media(max-width:760px){
 html.catalog-operacional .prontidao-item{flex-direction:column;align-items:flex-start}
 html.catalog-operacional .prontidao-item .btn{width:100%}
}
html.catalog-operacional .announcement-studio{width:calc(100vw - 32px);max-width:1600px;height:calc(100vh - 32px);max-height:calc(100vh - 32px);border-radius:6px}
html.catalog-operacional .studio-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 28px;align-items:start}
html.catalog-operacional .catalog-resumo{grid-column:1;grid-row:1;padding:14px;background:var(--paper-soft);border:1px solid var(--line)}
html.catalog-operacional .catalog-switcher{width:100%;font-size:13px;min-height:38px}
html.catalog-operacional .catalog-resumo-info{margin-top:12px}
html.catalog-operacional .catalog-resumo-info p{font-size:13px;margin:5px 0}
html.catalog-operacional .announcement-studio #edSecnav{grid-column:1;grid-row:2;position:static;display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-top:0;gap:0}
html.catalog-operacional .announcement-studio #edSecnav button{display:flex;flex-direction:column;align-items:flex-start;padding:15px;border-radius:0;border-bottom:1px solid var(--line);white-space:normal;text-align:left;gap:4px}
html.catalog-operacional .announcement-studio #edSecnav button small{font-size:11px;font-weight:400;opacity:.8}
html.catalog-operacional .announcement-studio #edSecnav button.ativa{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)}
html.catalog-operacional .announcement-studio #edSecnav button.ativa small{opacity:1}
html.catalog-operacional .announcement-studio #edSecao{grid-column:2;grid-row:1 / 3;min-width:0}
html.catalog-operacional .catalog-savebar{position:sticky;bottom:0;z-index:3;background:var(--card);padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:760px){html.catalog-operacional .studio-workspace{display:block}html.catalog-operacional .catalog-resumo{margin-bottom:8px}html.catalog-operacional .announcement-studio #edSecnav{display:grid;grid-template-columns:1fr 1fr;margin-bottom:16px}html.catalog-operacional .announcement-studio #edSecnav button{padding:10px}html.catalog-operacional .announcement-studio #edSecnav button small{display:none}html.catalog-operacional .property-card{grid-template-columns:110px 1fr}html.catalog-operacional .property-cover{min-height:110px}html.catalog-operacional .property-info{padding:10px}html.catalog-operacional .property-title{font-size:15px}html.catalog-operacional .announcement-studio{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}

/* PMS hospitality: linguagem do Catálogo aprovada, agora compartilhada por toda a operação.
 *
 * MENTA E LEVE (07/10/2026) — o que foi decidido para os tokens herdados da marca (nomes do tempo do roxo):
 *   --roxo, --brand, --lav, --lavanda, --shell-action  -> verde de TEXTO (--verde-texto). Servem a texto, ícone,
 *                                                         anel de foco, sublinhado e borda; os usos como FUNDO
 *                                                         neste arquivo foram reescritos para menta (regras 1 e 2).
 *   --roxo-deep, --roxo-hover, --roxo2, --brand-deep   -> verde forte (--verde-texto-forte): texto sobre menta e hover.
 *   --brand-soft, --lavanda-soft, --lavl, --nav-active -> menta; --lavanda-whisper segue um véu quase branco.
 *   --action-bg / --action-ink                         -> par menta + verde forte (o tema noturno mantém o azul dele).
 * ⚠ Texto sobre menta é SEMPRE o verde forte: o --roxo (verde de texto) dá 4,15:1 ali e reprova. Telas que ainda
 *   pintam `background:var(--roxo)` ou `var(--lav)` devem trocar pelas regras 1/2 da paleta (menta / indicador). */
:root:root{
 --brand:#1f7f65;--brand-deep:#1a6f58;--brand-soft:#e3efe9;
 --paper:#f8f7f5;--paper-soft:#fbfaf8;--paper-deep:#f1efec;--card:#fff;
 --line:#e6e3de;--line-strong:#cbd3cd;--ink:#202522;--ink-mute:#526057;--ink-soft:#67736b;
 --roxo:#1f7f65;--roxo-deep:#1a6f58;--roxo-hover:#1a6f58;--roxo2:#1a6f58;
 --lav:#1f7f65;--lavanda:#1f7f65;--lavl:#e3efe9;--lavanda-soft:#e3efe9;--lavanda-whisper:#f4faf7;
 --off:#f8f7f5;--txt:#202522;--mut:#526057;--bd:#e6e3de;
 --nav-bg:#fff;--nav-text:#56615b;--nav-muted:#7a817c;--nav-hover:#f4f5f2;--nav-active:#e3efe9;
 /* Vocabulário operacional compartilhado pelo Calendário, Catálogo e Revenue. */
 --ocupacao-airbnb-bg:#fbe9e9;--ocupacao-airbnb-ink:#a13b48;
 --ocupacao-booking-bg:#e6eefc;--ocupacao-booking-ink:#25579d;
 --ocupacao-decolar-bg:#efe5fc;--ocupacao-decolar-ink:#6533a6;
 --ocupacao-direto-bg:#fff0dd;--ocupacao-direto-ink:#92531b;
 --ocupacao-bloqueio-bg:#fbe0e2;--ocupacao-bloqueio-ink:#a22335;
 --ocupacao-manutencao-bg:#ddf1e4;--ocupacao-manutencao-ink:#27653f;
 --ocupacao-desconhecida-bg:#edf3f0;--ocupacao-desconhecida-ink:#466158;
}
html body:has(>.sidenav){background:#f8f7f5;color:#202522;margin-left:230px}
/* O Inbox usa o sistema MAIS NOVO de menu (linha ~1351: nasce fechado em toda tela, sem
   reservar espaço — a escolha fica salva). A linha acima é do sistema ANTERIOR ("sidebar
   sempre visível, 230px reservados"), reintroduzido pela repintura de 11/09 sem exceção pro
   Inbox — então ele voltou a reservar 230px mesmo com o menu fora da tela, sobrando um vão
   branco. `:not(.menu-aberto)` é o que faz essa regra não brigar com a de menu aberto (que
   já empurra 252px certinho, linha ~1356) — some só quando o menu está mesmo fechado.
   Achado e pedido pelo Wallace em 11/09, testado ao vivo antes de entrar aqui. */
html body.inbox-operador:not(.menu-aberto):has(>.sidenav){margin-left:0}
html body:has(>.sidenav)>.sidenav{width:230px;background:#fff;color:#56615b;border-right:1px solid #e6e3de;box-shadow:none;scrollbar-color:#cbd3cd #fff}
html body:has(>.sidenav) .sn-marca{min-height:72px;display:flex;align-items:center;background:#fff;color:#183f33;border-bottom:1px solid #e6e3de;padding:20px 21px;font-size:21px;font-weight:700;letter-spacing:-.55px}
html body:has(>.sidenav) .sn-marca span{color:var(--verde-texto,#1f7f65);font-size:10px;letter-spacing:2px;margin-left:7px}
html body:has(>.sidenav)>.sidenav{overflow-x:hidden}
html body:has(>.sidenav) .sn-marca{position:relative;padding-right:58px}
html body:has(>.sidenav) .sn-marca .aparencia-botao{position:absolute;right:12px;top:17px;width:36px;min-width:36px;height:36px;min-height:36px;margin:0;padding:6px;justify-content:center;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);border:1px solid var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav) .sn-marca .aparencia-botao .aparencia-texto{display:none}
html body:has(>.sidenav) .sn-itens{padding:12px 10px}
html body:has(>.sidenav) .sn-grupo{color:#89908b;font-size:10px;letter-spacing:.09em;margin-top:18px;padding:0 11px 6px}
html body:has(>.sidenav) :is(.sn-item,button.sn-item){color:#56615b;background:transparent;border-radius:7px;border:0;margin:2px 0;padding:10px 11px;min-height:40px;font-size:13px;font-weight:500}
html body:has(>.sidenav) :is(.sn-item,button.sn-item):hover{background:#f4f5f2;color:var(--verde-texto-forte,#1a6f58)}
html body:has(>.sidenav) :is(.sn-item,button.sn-item).ativo{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);font-weight:650}
html body:has(>.sidenav) .sn-item .seta{color:#8a958e}
html body:has(>.sidenav) .sn-sub{background:#fff;padding:3px 0 5px 18px}
html body:has(>.sidenav) .sn-sub a{color:#657069;border-radius:6px;margin:2px 0;padding:8px 10px 8px 22px}
html body:has(>.sidenav) .sn-sub a:hover{background:#f4f5f2;color:var(--verde-texto-forte,#1a6f58)}
html body:has(>.sidenav) .sn-sub a.ativo{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:none;font-weight:600}
html body:has(>.sidenav) .sn-extranet{color:#67736b;border-color:#e6e3de;background:#fff;padding:15px 21px}
html body:has(>.sidenav) .sn-extranet:hover{background:#f4f5f2;color:var(--verde-texto-forte,#1a6f58)}
html body:has(>.sidenav) .sn-badge{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav)>.barra-topo{min-height:64px;background:#fff;border-bottom:1px solid #e6e3de;padding:12px 28px;box-shadow:none}
html body:has(>.sidenav) .bt-titulo{color:#34473d;font-size:14px;font-weight:600}
html body:has(>.sidenav) .bt-chip{color:#67736b}
html body:has(>.sidenav) .bt-chip a{color:#3d5347;border-color:#e6e3de;background:#fff;border-radius:6px;text-decoration:none}
html body:has(>.sidenav) .bt-chip a:hover{color:var(--verde-texto-forte,#1a6f58);background:var(--menta,#e3efe9);border-color:var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav) button.bt-menu{color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav)>header{max-width:1720px;padding:24px 28px 13px}
html body:has(>.sidenav)>header h1{color:#202522;font-size:26px;font-weight:650;letter-spacing:-.035em}
html body:has(>.sidenav)>header .sub{color:#67736b;font-size:13px;margin-top:5px}
html body:has(>.sidenav)>main{max-width:1720px;padding:6px 28px 36px}
html body:has(>.sidenav) :is(.card,.card-editorial){background:#fff;border-color:#e6e3de;border-radius:8px;box-shadow:none;overflow:clip;margin-bottom:14px}
html body:has(>.sidenav) .card h2{color:#2a4035;border-color:#eeece7;padding:13px 16px;font-size:14px;font-weight:650}
html body:has(>.sidenav) .card .body{padding:14px 16px}
html body:has(>.sidenav) :is(.kpi,.stat){background:#fff;border:1px solid #e6e3de;border-radius:8px;padding:14px 16px}
html body:has(>.sidenav) :is(.kpi.destaque,.kpi.liquido){background:var(--menta,#e3efe9);border-color:var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav) :is(.kpi.destaque,.kpi.liquido) :is(b,.v){color:var(--verde-texto-forte,#1a6f58)}
html body:has(>.sidenav) :is(.kpi.destaque,.kpi.liquido) :is(span,.r,.s){color:#526057}
html body:has(>.sidenav) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){color:#253b30;background:#fff;border-color:#dfe2dd;border-radius:6px;box-shadow:none}
html body:has(>.sidenav) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{outline:0;border-color:var(--verde-texto,#1f7f65);box-shadow:0 0 0 3px rgba(31,127,101,.16)}
html body:has(>.sidenav) :is(input[type=checkbox],input[type=radio]){accent-color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav) label{color:#526057;font-weight:550}
/* BOTÃO GLOBAL (a origem do "verde chapado em tudo"): a regra longa logo abaixo pintava TODO botão da casca com
   fundo verde escuro e texto branco. Agora é o botão menta da paleta (fundo --menta, texto --verde-texto-forte,
   borda --menta-linha, hover --menta-hover), com as MESMAS exclusões de antes MAIS a família de perigo
   (`[class*=perigo]`: .perigo, .confirmar-perigo, .cv-perigo…): ação destrutiva não pode parecer ação segura, então
   ela segue a cor da própria tela (vermelho) em vez de menta. Selecionado e desabilitado ganharam
   cor própria, porque o fundo chapado os apagava. Não reescreva a abertura do seletor: a checagem do menu do
   Calendário a localiza por texto. */
html body:has(>.sidenav):not(.marketing-page) button{border-radius:6px;box-shadow:none}
html body:has(>.sidenav):not(.marketing-page) button:not(.bt-menu):not(.sn-item):not(.sn-workspace):not(.sn-recolher-desktop):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not([class*=perigo]){background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);border-color:var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav):not(.marketing-page) button:not(.bt-menu):not(.sn-item):not(.sn-workspace):not(.sn-recolher-desktop):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not([class*=perigo]):hover{background:var(--menta-hover,#d5e8df);border-color:var(--menta-linha,#cfe3d9)}
/* Estados que o fundo chapado antigo apagava: selecionado (aba/pílula/alternância) e desabilitado. Só cor. */
html body:has(>.sidenav):not(.marketing-page) button:not(.bt-menu):not(.sn-item):not(.sn-workspace):not(.sn-recolher-desktop):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not([class*=perigo]):is([aria-pressed=true],[aria-selected=true],.active,.ativo,.on){background:var(--menta-hover,#d5e8df);border-color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav):not(.marketing-page) button:not(.bt-menu):not(.sn-item):not(.sn-workspace):not(.sn-recolher-desktop):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not([class*=perigo]):disabled{background:var(--paper-deep);color:var(--ink-mute);border-color:var(--line-strong)}
/* Perigo: confirmar uma ação destrutiva (ex.: #dialogoConfirmar.confirmar-perigo em Usuários) fica fora do botão menta e segue o
   vermelho da própria tela. Aqui só o que a tela não define: contorno transparente (a base de botão das telas pinta
   --menta-linha em volta do vermelho), hover mais escuro (o hover menta foi excluído junto) e desabilitado. */
html body:has(>.sidenav):not(.marketing-page) button.confirmar-perigo{border-color:transparent}
html body:has(>.sidenav):not(.marketing-page) button.confirmar-perigo:hover{background:#8a3f39}
html body:has(>.sidenav):not(.marketing-page) button.confirmar-perigo:disabled{opacity:.55;cursor:not-allowed}
html body:has(>.sidenav) :is(button.ghost,.btn-secondary,.navbtn:not(.primary),.btn-limpaf){background:#fff;color:#405148;border:1px solid #e0e3de}
html body:has(>.sidenav) :is(button.ghost,.btn-secondary,.navbtn:not(.primary),.btn-limpaf):hover{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);border-color:var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav) :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--verde-texto,#1f7f65);outline-offset:2px}
/* Anel de foco do Inbox: inbox-layout.css (carrega depois do tema, mesma especificidade) pinta o anel azul #2563EB e
   inbox-equipe.css pinta o do nome da conversa com var(--acc) (azul). Aqui só a COR do anel (outline-color), com um
   :root a mais para vencer sem !important: o anel continua do tamanho/estilo que cada regra do Inbox já define. */
html:root body.inbox-operador :is(button,textarea,input,select,summary,a):focus-visible{outline-color:var(--verde-texto,#1f7f65)}
html:root #thread-topo input.inbox-nome-campo:focus{border-color:var(--verde-texto,#1f7f65);outline-color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav) table{background:#fff}
html body:has(>.sidenav) th{background:#f8f8f5!important;color:#667169;border-color:#e9e8e3;font-size:11.5px;font-weight:650}
html body:has(>.sidenav) td{color:#2d3831;border-color:#eeece7}
html body:has(>.sidenav) tbody tr:hover td{background:#f8fbf9}
html body:has(>.sidenav) :is(.aba,.tab){color:#67736b}
html body:has(>.sidenav) :is(.aba.ativa,.tab.ativa,.tab.active){color:var(--verde-texto-forte,#1a6f58);border-color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav) :is(.chip.ligado,.chip.ativo,.chip.on){background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);border-color:var(--menta-linha,#cfe3d9)}
html body:has(>.sidenav) :is(.modal,.dlg,.dialog,.drawer){border-radius:10px;border-color:#e6e3de;box-shadow:0 20px 70px #173c2924}
html body:has(>.sidenav) :is(.modal,.dlg,.dialog,.drawer)::backdrop{background:#1d302852;backdrop-filter:blur(2px)}
html body:has(>.sidenav) .calendar-card .toolbar{background:#fff;border-color:#e6e3de;padding:10px 14px}
html body:has(>.sidenav) .calendar-card .toolbar2{background:#faf9f7;border-color:#e6e3de;padding:8px 14px}
html body:has(>.sidenav) .calendar-card .ghead :is(.corner,.day){background:#f5f4f1;border-color:#e6e3de}
html body:has(>.sidenav) .calendar-card .ghead .day.wknd{background:#edf4f0}
html body:has(>.sidenav) .calendar-card .grow{background:#f1f6f3;color:#294b3c;border-color:#b7d2c5}
html body:has(>.sidenav) .calendar-card .grow:hover{background:#e8f2ed}
html body:has(>.sidenav) .calendar-card .grow.glob{background:var(--menta,#e3efe9);border-top-color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav) .calendar-card .row .lbl .code{color:var(--verde-texto,#1f7f65)}
html body:has(>.sidenav) .calendar-card .bar.ok{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)}
@media(min-width:1100px){
 html body:has(>.sidenav):not(.inbox-operador){margin-left:230px}
 html body:has(>.sidenav):not(.inbox-operador)>.sidenav{transform:none;visibility:visible}
 html body:has(>.sidenav):not(.inbox-operador)>.barra-topo .bt-menu{display:none}
 html body.menu-aberto:has(>.sidenav):not(.inbox-operador){margin-left:230px}
}
@media(max-width:900px){
 html body:has(>.sidenav){margin-left:0}
 html body:has(>.sidenav)>.sidenav{transform:translateX(-100%);visibility:hidden;width:min(84vw,290px)}
 html body.menu-aberto:has(>.sidenav)>.sidenav{transform:none;visibility:visible}
 html body.menu-aberto:has(>.sidenav){margin-left:0}
 html body:has(>.sidenav)>.barra-topo{min-height:58px;padding:10px 14px}
 html body:has(>.sidenav)>header{padding:20px 14px 10px}
 html body:has(>.sidenav)>main{padding:4px 12px 24px}
 /* O inbox tem geometria própria (inbox-layout.css) desenhada para ocupar a largura inteira do
    celular; a linha acima sobrava por cima dela. Excluir com `:not(.inbox-operador)` não bastava:
    a regra SEM media query, sete linhas acima deste bloco (`padding:6px 28px 36px`), continuava
    valendo e trocava 24px de sobra por 56px — pior. Então aqui não é exclusão, é override: uma
    classe a mais de especificidade (0,2,3 contra 0,1,3 das outras duas) vence as duas de vez,
    sem depender de qual delas o navegador aplicaria por último. */
 html body.inbox-operador:has(>.sidenav)>main{padding:0}
 html body:has(>.sidenav)>header h1{font-size:22px}
 html body:has(>.sidenav) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 html body:has(>.sidenav) :is(button,.btn){min-height:42px}
}
@media(prefers-reduced-motion:reduce){html body:has(>.sidenav) *{transition:none!important;animation:none!important}}
/* Mobile aprovado no Figma: isolado das geometrias e preferências de desktop. */
.operation-mobile-nav,.mobile-filter-toggle{display:none}
@media(max-width:700px){
 html.mobile-approved:root:root,html.mobile-approved:root:root[data-theme=dark]{
  color-scheme:light!important;--paper:#f5f8f6!important;--paper-soft:#edf4ef!important;--paper-deep:#e3eee7!important;--card:#fff!important;--card-line:#e1eae5!important;
  --ink:#203d31!important;--ink-mute:#52665c!important;--ink-soft:#657a71!important;--line:#e1eae5!important;--line-strong:#b4c8bd!important;
  --roxo:#1f7f65!important;--roxo2:#1a6f58!important;--roxo-hover:#1a6f58!important;--lavanda-soft:#e3efe9!important;--lavanda-whisper:#e3efe9!important;
  --off:#f5f8f6!important;--txt:#203d31!important;--mut:#52665c!important;--bd:#e1eae5!important;--lavl:#edf4ef!important;
  --gold-soft:#fff6e3!important;--danger-soft:#fff0f0!important;--success-soft:#e4f1e9!important;--danger:#a73343!important;--amber-ink:#806019!important;--sage-ink:#176440!important;
  --nav-bg:#fff!important;--nav-text:#203d31!important;--nav-muted:#52665c!important;--nav-hover:#edf4ef!important;--nav-active:#e3efe9!important;
  --action-bg:#e3efe9!important;--action-ink:#1a6f58!important;--basebg:#f5f8f6!important;--warnbg:#fff6e3!important;--errbg:#fff0f0!important;
 }
 html.mobile-approved body{background:#f5f8f6!important;color:#203d31!important}
 html.mobile-approved body .barra-topo{background:#fff!important;color:#203d31!important;min-height:56px;padding:6px 14px!important;border-bottom:1px solid #e1eae5}
 html.mobile-approved .barra-topo .bt-chip{font-size:0!important}
 html.mobile-approved .barra-topo .bt-chip a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
 html.mobile-approved body :is(input,select,textarea){max-width:100%;min-width:0;box-sizing:border-box;font-size:16px!important;min-height:44px;color:#203d31!important;background:#fff!important;color-scheme:light}
 html.mobile-approved body :is(input[type=checkbox],input[type=radio]){min-height:20px}
 html.mobile-approved body :is(button,.btn){min-height:44px}
 html.mobile-approved body :is(.card,.card .body,.card h2){background:#fff!important;color:#203d31!important;border-color:#e1eae5!important;box-shadow:none!important}
 html.mobile-approved body :is(.card td,.card td[style],.card tr:hover td){background:transparent!important;color:#203d31!important}
 html.mobile-approved body :is(.card td a,.card td strong){color:#203d31!important}
 html.mobile-approved body .card tr.mesmodia{background:#fff6e3!important}
 html.mobile-approved body :is(.banner.err,.b-mesmodia){background:#fff0f0!important;color:#a73343!important;border-color:#efcbd0!important;animation:none!important}
 html.mobile-approved body .badge{white-space:normal;max-width:100%}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) main{padding:16px 16px 96px!important;max-width:100%;min-width:0}
 html.mobile-approved .cleaning-mobile>header{padding:20px 16px 0!important;background:transparent!important;color:#203d31!important}
 html.mobile-approved .cleaning-mobile>header h1{font-size:24px!important;color:#203d31!important}
 html.mobile-approved .cleaning-mobile>header .sub{font-size:14px;color:#52665c!important}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page) .card{border:1px solid #e1eae5!important;border-radius:16px!important;overflow:hidden;margin-bottom:16px}
 html.mobile-approved .cleaning-mobile .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 html.mobile-approved .cleaning-mobile .stat{min-width:0;padding:8px 5px;font-size:10px;background:#edf4ef!important;color:#52665c!important}
 html.mobile-approved .cleaning-mobile .stat b{font-size:22px;color:#203d31!important}
 html.mobile-approved .cleaning-mobile .diahdr{flex-wrap:wrap;gap:6px}
 html.mobile-approved .cleaning-mobile .diahdr .rota{margin-left:0;min-height:44px;display:inline-flex;align-items:center;white-space:normal}
 html.mobile-approved :is(.cleaning-mobile .tblwrap,.tarefas-page:not(.inbox-tasks-page) .task-table-scroll){overflow:visible}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) table{min-width:0!important;width:100%}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) thead{display:none}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) tbody{display:grid;gap:12px}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:14px;gap:12px;background:#fff;border:1px solid #e1eae5;border-radius:12px}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) td{display:block;min-width:0;padding:0!important;border:0;overflow-wrap:anywhere;white-space:normal;font-size:14px}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page:not(.inbox-tasks-page)) td[data-mobile-label]::before{content:attr(data-mobile-label);display:block;color:#52665c;font-size:11px;margin-bottom:4px}
 html.mobile-approved .cleaning-mobile td:is(:first-child,:nth-child(4),:nth-child(5),:last-child){grid-column:1/-1}
 html.mobile-approved .cleaning-mobile td:first-child a{font-size:18px}
 html.mobile-approved .cleaning-mobile .sel-fax{width:100%}
 html.mobile-approved .cleaning-mobile .acts{gap:8px}
 html.mobile-approved .cleaning-mobile .acts .btn{flex:1;white-space:normal;background:var(--menta,#e3efe9)!important;color:var(--verde-texto-forte,#1a6f58)!important}
 html.mobile-approved .tarefas-page:not(.inbox-tasks-page) td:nth-child(4){grid-column:1/-1;grid-row:1;font-weight:600;font-size:16px}
 html.mobile-approved .tarefas-page .f>label{min-width:0;flex-basis:100%;width:100%}
 html.mobile-approved .mobile-filter-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;background:var(--menta,#e3efe9)!important;color:var(--verde-texto-forte,#1a6f58)!important;font-size:14px;padding:8px 14px;border:0}
 html.mobile-approved :is(.cleaning-mobile,.tarefas-page) .card h2:has(.mobile-filter-toggle){display:flex;align-items:center;justify-content:space-between;font-size:0!important}
 html.mobile-approved [hidden]{display:none!important}
 html.mobile-approved .operation-mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;gap:4px;padding:8px 12px max(8px,env(safe-area-inset-bottom));background:#e8f2ed;border-top:1px solid #e1eae5}
 html.mobile-approved .operation-mobile-nav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;color:#203d31;text-decoration:none;font-size:12px;border-radius:8px}
 html.mobile-approved .operation-mobile-nav a[aria-current=page]{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)}
 html.mobile-approved.calendar-figma{--labelw:128px!important;--rowh:52px!important}
 html.mobile-approved.calendar-figma.calendar-compact{--rowh:52px!important}
 html.mobile-approved.calendar-figma .row .lbl .code{font-size:14px!important}
 html.mobile-approved.calendar-figma .row .lbl .capacity{font-size:11px!important}
 html.mobile-approved.calendar-figma .bar,html.mobile-approved.calendar-figma.calendar-compact .bar{height:40px!important;top:6px!important;border-radius:8px!important}
 html.mobile-approved.calendar-figma .reservation-copy strong{font-size:12px!important}
 html.mobile-approved.calendar-figma .calendar-card>.toolbar{height:auto!important;min-height:96px!important;flex-wrap:wrap!important;padding:4px 8px!important;gap:4px!important}
 html.mobile-approved.calendar-figma #grupo-periodo{min-width:calc(100% - 4px);flex:1}
 html.mobile-approved.calendar-figma #btn-periodo{font-size:12px!important}
 html.mobile-approved.calendar-figma .calendar-card>.toolbar :is(button,.navbtn){min-height:44px!important}
 html.mobile-approved.calendar-figma :is(.pop,.modal,.dlg,.calendar-tools){max-width:calc(100vw - 24px)!important;max-height:85dvh;overflow:auto}
 html.mobile-approved.dashboard-figma .card tr{padding:16px;gap:8px 12px}
 html.mobile-approved.dashboard-figma .card td:first-child{font-size:16px;font-weight:600}
 html.mobile-approved .announcement-studio :is(dialog,.modal,.drawer){max-width:calc(100vw - 24px)!important}
 html.mobile-approved :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--verde-texto,#1f7f65);outline-offset:2px}
}

/* ==============================================================================================
 * CASCA LATERAL ÚNICA · aprovada no Painel em 23/09/2026
 * `base.js` aplica a classe somente às telas autenticadas da agência. Este bloco é o único dono
 * da geometria/pele da navegação; login, portal, site público, TV, totem e app de campo ficam fora.
 * ============================================================================================ */
/* CONTRASTE AA (QA geral 24/09/2026): --shell-muted #607a70→#5a7369, .sn-grupo #6e887d→#5c7168 e
   --ink-soft #69766d→#67736b. Mesma matiz e saturação, só mais escuros, até ≥4,6:1 sobre #eef5f1/#f8f7f5
   (axe color-contrast: 70 nós em 19 telas). A paleta pastel não muda. */
html.casca-lateral-unificada{
 --shell-sidebar-width:220px;--shell-sidebar-bg:#eef5f1;--shell-ink:#173d32;
 --shell-muted:#5a7369;--shell-line:#d8e6e0;--shell-action:#1f7f65;--shell-soft:#e3efe9;
}

@media(min-width:701px){
 html.casca-lateral-unificada body:has(>.sidenav),
 html.casca-lateral-unificada body.inbox-operador:has(>.sidenav),
 html.casca-lateral-unificada body.menu-aberto:has(>.sidenav){margin-left:var(--shell-sidebar-width)!important}
 html.casca-lateral-unificada body>.sidenav{box-sizing:border-box!important;display:flex!important;width:var(--shell-sidebar-width)!important;padding:0 16px 12px!important;transform:none!important;visibility:visible!important;background:var(--shell-sidebar-bg)!important;color:var(--shell-ink)!important;border-right:1px solid var(--shell-line)!important;box-shadow:none!important;overflow-x:hidden}
 html.casca-lateral-unificada body>.barra-topo .bt-menu{display:none!important}
 html.casca-lateral-unificada body>.sn-veu{display:none!important}
 html.casca-lateral-unificada body .ops-mobile-nav{display:none!important}

 html.casca-lateral-unificada .sidenav .sn-marca{flex:none;min-height:61px;padding:19px 0 12px!important;border:0!important;background:transparent!important;color:var(--shell-ink)!important;font-family:"DM Sans",var(--font-sans,system-ui,sans-serif);font-size:21px!important;font-weight:700!important;letter-spacing:-.04em!important;text-transform:none!important}
 html.casca-lateral-unificada .sidenav .sn-marca span{display:inline-flex;align-items:center;margin-left:7px;padding:4px 7px;border-radius:6px;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)!important;box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);font-size:8px!important;line-height:1;letter-spacing:.06em!important}

 html.casca-lateral-unificada .sn-workspace{flex:none;display:grid!important;grid-template-columns:32px minmax(0,1fr) 15px;align-items:center;gap:9px;width:100%;min-height:64px;margin:0 0 15px;padding:10px!important;border:1px solid var(--shell-line)!important;border-radius:11px!important;background:#fff!important;color:var(--shell-ink)!important;text-align:left;box-shadow:0 2px 8px rgba(22,63,50,.035)!important;cursor:pointer}
 html.casca-lateral-unificada .sn-workspace:hover{border-color:#bad4c9!important;background:#fff!important}
 html.casca-lateral-unificada .sn-workspace-marca{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);font-size:12px;font-weight:750}
 html.casca-lateral-unificada .sn-workspace-texto{display:flex;min-width:0;flex-direction:column;gap:2px;line-height:1.15}
 html.casca-lateral-unificada .sn-workspace-texto strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
 html.casca-lateral-unificada .sn-workspace-texto span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--shell-muted);font-size:10px}
 html.casca-lateral-unificada .sn-workspace-seta{width:14px;height:14px;transform:none;color:var(--shell-muted)}

 html.casca-lateral-unificada .sn-itens-resumido{flex:none;padding:0!important;gap:0!important;overflow:visible}
 html.casca-lateral-unificada .sn-itens-resumido .sn-grupo{margin:12px 0 5px;padding:0!important;color:#5c7168!important;font-size:10px!important;font-weight:600;letter-spacing:.09em!important}
 html.casca-lateral-unificada .sn-itens-resumido .sn-grupo:first-child{margin-top:0}
 html.casca-lateral-unificada :is(.sn-itens-resumido,.sn-rodape-desktop) .sn-item{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;margin:0!important;padding:8px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:#55756a!important;font-size:13px!important;font-weight:500!important;line-height:1.2;text-decoration:none}
 html.casca-lateral-unificada :is(.sn-itens-resumido,.sn-rodape-desktop) .sn-item:hover{background:#f7fbf9!important;color:var(--verde-texto-forte,#1a6f58)!important}
 html.casca-lateral-unificada .sn-itens-resumido .sn-item.ativo{min-height:40px;background:var(--menta,#e3efe9)!important;color:var(--verde-texto-forte,#1a6f58)!important;border-color:var(--menta-linha,#cfe3d9)!important;font-weight:600!important;box-shadow:0 1px 3px rgba(32,61,49,.08)}
 html.casca-lateral-unificada :is(.sn-itens-resumido,.sn-rodape-desktop) .sn-item :is(svg,.sn-item-icone){display:block;flex:0 0 18px;width:18px;height:18px;stroke-width:1.75}
 html.casca-lateral-unificada :is(.sn-itens-resumido,.sn-rodape-desktop) .sn-item .sn-badge{margin-left:auto;min-width:23px;padding:3px 7px;border-radius:999px;background:var(--menta,#e3efe9)!important;color:var(--verde-texto-forte,#1a6f58)!important;box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);font-size:10px;font-weight:700;text-align:center}
 html.casca-lateral-unificada :is(.sn-itens-resumido,.sn-rodape-desktop) .sn-item.desab-topo{opacity:.78;cursor:not-allowed}

 html.casca-lateral-unificada .sn-rodape-desktop{display:flex!important;flex:none;flex-direction:column;gap:2px;width:100%;margin-top:auto;padding-top:12px}
 html.casca-lateral-unificada .sn-conta{position:relative;display:grid!important;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;flex:none;margin:12px 0 0;padding:13px 4px 2px;border-top:1px solid #d7e5df;background:transparent;color:var(--shell-ink)}
 html.casca-lateral-unificada .sn-conta-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58);box-shadow:inset 0 0 0 1px var(--menta-linha,#cfe3d9);font-size:10px;font-weight:750}
 html.casca-lateral-unificada .sn-conta-texto{display:flex;min-width:0;flex-direction:column;gap:2px;line-height:1.15}
 html.casca-lateral-unificada .sn-conta-texto strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
 html.casca-lateral-unificada .sn-conta-texto span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--shell-muted);font-size:9px;letter-spacing:.03em}
 html.casca-lateral-unificada .sn-conta-menu{position:relative}
 html.casca-lateral-unificada .sn-conta-menu summary{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--shell-muted);font-size:11px;letter-spacing:1px;cursor:pointer;list-style:none}
 html.casca-lateral-unificada .sn-conta-menu summary::-webkit-details-marker{display:none}
 html.casca-lateral-unificada .sn-conta-menu summary:hover{background:#fff;color:var(--shell-action)}
 html.casca-lateral-unificada .sn-conta-menu summary img{display:block;width:18px;height:18px}
 html.casca-lateral-unificada .sn-conta-menu-painel{position:absolute;right:0;bottom:34px;z-index:4;width:108px;padding:5px;border:1px solid var(--shell-line);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(22,63,50,.12)}
 html.casca-lateral-unificada .sn-conta-sair{display:block;padding:7px 8px;border-radius:5px;color:var(--shell-ink);font-size:11px;text-decoration:none}
 html.casca-lateral-unificada .sn-conta-sair:hover{background:var(--menta,#e3efe9);color:var(--verde-texto-forte,#1a6f58)}

 /* A casca vence estilos globais legados de button; a cápsula visível é menor que o alvo. */
 html.casca-lateral-unificada .sn-recolher-desktop{position:fixed;z-index:45;top:var(--shell-toggle-top,78px);left:calc(var(--shell-sidebar-width) - 6px);display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;min-width:40px;min-height:44px;padding:0!important;border:0!important;border-radius:12px!important;background:transparent!important;color:rgba(31,127,101,.78)!important;box-shadow:none!important;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:left .18s ease,color .14s ease}
 html.casca-lateral-unificada .sn-recolher-desktop[hidden]{display:none!important}
 html.casca-lateral-unificada .sn-recolher-desktop::before{content:"";position:absolute;inset:8px 12px 8px 2px;border-radius:0 10px 10px 0;background:rgba(205,235,222,.34);-webkit-backdrop-filter:blur(6px) saturate(115%);backdrop-filter:blur(6px) saturate(115%);transition:background-color .14s ease}
 html.casca-lateral-unificada .sn-recolher-desktop:hover{color:var(--shell-action)!important;background:transparent!important}
 html.casca-lateral-unificada .sn-recolher-desktop:hover::before{background:rgba(190,228,212,.52)}
 html.casca-lateral-unificada .sn-recolher-desktop:active::before,html.casca-lateral-unificada .sn-recolher-desktop.is-dragging::before{background:rgba(177,218,201,.62)}
 html.casca-lateral-unificada .sn-recolher-desktop:focus-visible{outline:2px solid var(--shell-action)!important;outline-offset:-4px}
 html.casca-lateral-unificada .sn-recolher-desktop.is-dragging{cursor:grabbing}
 html.casca-lateral-unificada .sn-recolher-desktop :is(svg,img){position:relative;z-index:1;display:block;width:12px;height:12px;transform:rotate(180deg);transition:transform .18s ease}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida:has(>.sidenav){margin-left:0!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav{transform:translateX(-100%)!important;visibility:hidden!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida .sn-recolher-desktop{left:0}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida .sn-recolher-desktop :is(svg,img){transform:none}

 html.casca-lateral-unificada.calendar-focus body:has(>.sidenav){margin-left:0!important}
 /* MENU: MOSTRAR/RECOLHER (17/10/2026). O botão fica no alto do menu, ao lado da marca; recolhido, o
    menu vira uma faixa de 56 px só com os ícones (o nome aparece ao passar o mouse) e o mesmo botão
    no topo mostra de novo. Substitui o "›" que flutuava por cima da tela e se arrastava. */
 html.casca-lateral-unificada .sidenav .sn-marca{display:flex!important;align-items:center!important}
 html.casca-lateral-unificada .sidenav .sn-marca>.sn-recolher-desktop{position:static!important;z-index:auto!important;flex:none;margin:0 -6px 0 auto!important;display:inline-flex!important;align-items:center;justify-content:center;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#6b7f76!important;box-shadow:none!important;cursor:pointer}
 html.casca-lateral-unificada .sidenav .sn-marca>.sn-recolher-desktop::before{content:none!important;display:none!important}
 html.casca-lateral-unificada .sidenav .sn-marca>.sn-recolher-desktop:hover{background:var(--menta,#e3efe9)!important;color:var(--verde-texto-forte,#1a6f58)!important}
 html.casca-lateral-unificada .sidenav .sn-marca>.sn-recolher-desktop :is(svg,img){width:13px;height:13px;transform:rotate(180deg)}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida{--shell-sidebar-width:56px}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida:has(>.sidenav){margin-left:56px!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav{transform:none!important;visibility:visible!important;width:56px!important;padding:0 8px 12px!important;overflow-x:hidden!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-marca{justify-content:center!important;font-size:0!important;padding-left:0!important;padding-right:0!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-marca>span{display:none!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-marca>.sn-recolher-desktop{margin:0!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-marca>.sn-recolher-desktop :is(svg,img){transform:none}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav :is(.sn-workspace,.sn-grupo,.sn-rot,.sn-conta-texto,.sn-conta-menu){display:none!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-item{justify-content:center!important;padding-left:0!important;padding-right:0!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-item>span{justify-content:center!important;gap:0!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-item :is(.sn-badge,.sn-contador,b,small,em){display:none!important}
 html.casca-lateral-unificada body.sidebar-desktop-recolhida>.sidenav .sn-conta{justify-content:center!important}
 html.casca-lateral-unificada .sn-recolher-desktop.sn-recolher-na-barra{position:static!important;z-index:auto!important;flex:none;display:grid!important;place-items:center;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;margin:0!important;padding:0!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#5a6e65!important;box-shadow:none!important;cursor:pointer}
 html.casca-lateral-unificada .sn-recolher-desktop.sn-recolher-na-barra::before{content:none!important;display:none!important}
 html.casca-lateral-unificada .sn-recolher-desktop.sn-recolher-na-barra:hover{background:#f1f7f4!important;color:#1a6f58!important}
 html.casca-lateral-unificada .sn-recolher-desktop.sn-recolher-na-barra[aria-expanded="false"]{color:#1a6f58!important}
 html.casca-lateral-unificada .sn-recolher-desktop.sn-recolher-na-barra svg{width:17px;height:17px;transform:none!important}
 /* telas que põem o botão numa barra própria (Inbox: inbox-figma.js; Calendário: index.html) marcam o body com
    .menu-na-barra: recolhido, o menu some por inteiro e a tela ganha a largura */
 html.casca-lateral-unificada body.menu-na-barra.sidebar-desktop-recolhida:has(>.sidenav){margin-left:0!important}
 html.casca-lateral-unificada body.menu-na-barra.sidebar-desktop-recolhida>.sidenav{display:none!important}
 html.casca-lateral-unificada.calendar-focus :is(.sidenav,.sn-recolher-desktop){display:none!important}
}

/* A descrição acessível da barra lateral também fica visualmente oculta no celular. */
html.casca-lateral-unificada :is(.sn-recolher-ajuda,.sn-recolher-status){position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}


@media(max-width:700px){
 html.casca-lateral-unificada body:has(>.sidenav),html.casca-lateral-unificada body.inbox-operador:has(>.sidenav){margin-left:0!important}
 html.casca-lateral-unificada body>.sidenav{width:min(84vw,290px)!important;transform:translateX(-100%)!important;visibility:hidden!important}
 html.casca-lateral-unificada body.nav-drawer-aberto>.sidenav,html.casca-lateral-unificada body.menu-aberto>.sidenav{transform:none!important;visibility:visible!important}
 html.casca-lateral-unificada body>.barra-topo .bt-menu{display:inline-flex!important;align-items:center;justify-content:center}
 html.casca-lateral-unificada :is(.sn-recolher-desktop,.sn-itens-resumido,.sn-workspace,.sn-rodape-desktop,.sn-conta){display:none!important}
 html.casca-lateral-unificada.calendar-figma .calendar-card>.toolbar{padding-left:8px!important}
}

@media print{
 html.casca-lateral-unificada body:has(>.sidenav){margin-left:0!important}
 html.casca-lateral-unificada :is(.sidenav,.barra-topo,.sn-veu,.sn-recolher-desktop){display:none!important}
}

@media(forced-colors:active){
 html.casca-lateral-unificada .sn-recolher-desktop{color:ButtonText!important;forced-color-adjust:auto}
 html.casca-lateral-unificada .sn-recolher-desktop::before{background:Canvas!important;border:1px solid ButtonText}
 html.casca-lateral-unificada .sn-recolher-desktop:focus-visible{outline-color:Highlight!important}
}