/* ==========================================================================
   OLLIVER — CARA DE APLICATIVO (celular e tablet)

   A ultima camada do painel e do portal. As pecas (barra de cima, barra de
   abas, alca da folha) sao criadas pelo app-mobile.js; aqui elas so aparecem
   no tamanho certo. No computador (acima de 1100px) nada disto vale.

     Celular em pe ............ barra de cima + abas embaixo + "Mais" em folha
     Tablet e celular deitado . trilho de icones na esquerda, sempre a vista

   As duas faixas sao exclusivas, e as consultas se repetem por bloco porque
   CSS nao guarda media query em variavel:
     CELULAR  (max-width: 767.98px) and (orientation: portrait),
              (max-width: 767.98px) and (min-height: 501px)
     TRILHO   (min-width: 768px) and (max-width: 1100px),
              (max-width: 1100px) and (max-height: 500px) and (orientation: landscape)
   ========================================================================== */

.am-topo, .am-abas, .am-alca, .am-ponto { display: none; }

/* ---- toque: nada de zoom com dois toques, de selecionar texto sem querer
   ao segurar um botao, nem de "puxar para recarregar" no meio de um arrasto ---- */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
  body { overscroll-behavior-y: none; }
  button, a, [role="button"], label, summary, select, .am-aba { touch-action: manipulation; }
  button, .am-aba, nav.menu, .sub-modulo, .am-topo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  img { -webkit-user-drag: none; }
  [draggable="true"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* Recorte da foto da agenda: o dedo move a imagem, nao rola a pagina
     (sem isto o navegador tomava o gesto e o recorte "travava" no meio). */
  .agr-quadro { touch-action: none; }
  /* Os quadros que rolam de lado nao arrastam a pagina junto. */
  .kanban, .quadro, .colunas, [class*="quadro"], [class*="kanban"] { overscroll-behavior-x: contain; }
}

/* Fila de chips que rola de lado: o chip nao encolhe (encolhido, o nome
   do plano saia cortado — "Platinu"). */
.cl-planos > .cl-plano { flex-shrink: 0; }

/* Em tela de toque nao existe "passar o mouse": a dica do calendario do
   ponto vira "toque no dia" (o toque mostra as batidas, app-mobile.js). */
@media (hover: none) {
  .pt-legenda span { font-size: 0 !important; }
  .pt-legenda span::after { content: "Toque no dia para ver as quatro batidas."; font-size: .72rem; }
}

/* Escritorio: quem esta perto da borda do mapa (a copa e o lounge ficam
   colados na esquerda) tinha o nome e a dica cortados ao meio. O balao
   continua centrado na pessoa, mas para a 4px da borda do mapa. Vale em
   qualquer tamanho; sem suporte a cqw a regra e ignorada e fica a de antes. */
.esc-mapa { container-type: inline-size; }
.esc-pessoa .esc-nome,
.esc-pessoa .esc-dica,
.esc-pessoa:hover .esc-dica {
  --am-cx: calc(var(--x) / 26 * 100cqw);
  transform: translateX(min(max(-50%, calc(4px - var(--am-cx))), calc(100cqw - var(--am-cx) - 100% - 4px))) !important;
}

/* ---- desempenho no celular e no tablet ----
   O desfoque de vidro (backdrop-filter) refaz o borrão de tudo que esta atras
   do elemento a cada quadro da rolagem; com dezenas de cartoes de vidro por
   tela, a placa de video do celular nao da conta e a rolagem engasga. Aqui o
   vidro vira fundo quase solido (a cor ja era quase opaca). Ficam com
   desfoque so as janelas abertas, que nao rolam sobre a tela.
   O fundo "fixed" tambem sai: no celular ele obriga a repintar a tela inteira
   a cada rolagem, e o body::before ja e fixo por conta propria. */
@media (pointer: coarse), (max-width: 1100px) {
  *:not(dialog), *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body::before { background-attachment: scroll !important; }
  .am-topo, .am-abas { background: rgba(10, 13, 18, .96) !important; }
  body.portal-cliente .am-topo, body.portal-cliente .am-abas { background: rgba(255, 255, 255, .97) !important; }
  body.com-lateral nav.sub-modulo:not([hidden]) { background: rgba(10, 13, 18, .96) !important; }
  body.menu-aberto::after { background: rgba(3, 5, 9, .62) !important; }
}

/* Arrastar com o dedo (app-mobile.js) */
.am-segurando { transition: transform .28s ease, box-shadow .28s ease; }
.am-fantasma {
  background-color: var(--painel, #10151d) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 100000 !important;
  pointer-events: none !important;
  opacity: .92;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .55), 0 0 0 2px var(--destaque, #ff5a1f) !important;
  border-radius: 14px;
  will-change: transform;
  transition: none !important;
  animation: none !important;
}
html.am-arrastando, html.am-arrastando body { cursor: grabbing; -webkit-user-select: none; user-select: none; }
html.am-arrastando [draggable="true"].arrastando { opacity: .35; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 767.98px) and (orientation: portrait), (max-width: 767.98px) and (min-height: 501px) {
  :root {
    --am-topo-h: 56px;
    --am-abas-h: 62px;
    --am-topo: calc(var(--am-topo-h) + env(safe-area-inset-top, 0px));
    --am-abas: calc(var(--am-abas-h) + env(safe-area-inset-bottom, 0px));
    --am-vidro: rgba(10, 13, 18, .82);
    --am-borda: rgba(255, 255, 255, .07);
    --am-icone: #8b95a5;
  }
  body.portal-cliente {
    --am-vidro: rgba(255, 255, 255, .86);
    --am-borda: rgba(15, 23, 42, .08);
    --am-icone: #64748b;
  }

  button.abrir-menu { display: none !important; }

  /* A tela nunca ganha largura: o que vazar (uma janela larga, um cartao
     teimoso) e corrigido no lugar, mas o celular nao faz "zoom out" nem
     deixa a pagina escorregar para o lado no meio da rolagem. */
  html { overflow-x: hidden; }

  /* ---- barra de cima ---- */
  .am-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 38;
    height: var(--am-topo);
    padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    background: var(--am-vidro);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  body.am-rolou .am-topo { border-bottom-color: var(--am-borda); box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .5); }
  .am-logo { height: 26px; width: auto; max-width: 96px; object-fit: contain; flex: 0 0 auto; transition: opacity .2s ease, transform .2s ease; }
  .am-logo { filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 158, 107, .4)); }
  body.portal-cliente .am-logo { filter: brightness(0) opacity(.85); }
  .am-titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  body.am-rolou .am-titulo { opacity: 1; transform: none; }
  .am-eu {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }
  .am-eu .avatar { width: 34px !important; height: 34px !important; font-size: 12px; margin: 0; pointer-events: none; }

  /* ---- barra de abas ---- */
  .am-abas {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 42;
    height: var(--am-abas);
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
    background: var(--am-vidro);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-top: 1px solid var(--am-borda);
  }
  .am-aba {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--am-abas-h);
    min-height: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--am-icone) !important;
    font: inherit;
    overflow: visible !important;
  }
  .am-aba-icone {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 30px;
    border-radius: 999px;
    transition: background .25s ease, transform .2s ease;
  }
  .am-aba:active .am-aba-icone { transform: scale(.9); }
  .am-aba svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .am-mais svg { fill: currentColor; stroke: none; }
  .am-aba-rotulo { max-width: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .am-aba.ativa { color: var(--destaque, #ff5a1f) !important; }
  .am-aba.ativa .am-aba-icone { background: rgba(255, 90, 31, .14); }
  .am-aba.ativa svg { stroke-width: 2.1; }
  .am-selo {
    position: absolute;
    top: -2px;
    left: 32px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--destaque, #ff5a1f);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--fundo, #0b0e13);
  }
  .am-selo.am-ponto { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 2px; left: 34px; }
  .am-mais .am-selo:not(.am-ponto) { display: none; }

  /* ---- o miolo: respiro para as duas barras ---- */
  body.com-lateral main,
  body.com-lateral:has(.central) main {
    padding-top: calc(var(--am-topo) + 14px) !important;
    padding-bottom: calc(var(--am-abas) + 28px) !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    margin-left: 0 !important;
  }
  body.portal-cliente main { padding-top: calc(var(--am-topo) + 10px) !important; }

  /* Sub-abas: grudam embaixo da barra de cima e rolam de lado. */
  body.com-lateral nav.sub-modulo:not([hidden]) {
    position: sticky;
    top: var(--am-topo);
    z-index: 30;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: var(--am-topo) 0 0 !important;
    padding: 8px 14px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    background: var(--am-vidro);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid var(--am-borda);
  }
  body.com-lateral nav.sub-modulo::-webkit-scrollbar { display: none; }
  body.com-lateral nav.sub-modulo button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; min-height: 36px; }
  body:has(nav.sub-modulo:not([hidden])) main { padding-top: 16px !important; }
  body:has(nav.sub-modulo:not([hidden])) .am-topo { border-bottom-color: transparent; box-shadow: none; }
  body.modo-config nav.sub-modulo:not([hidden]) { position: sticky !important; top: var(--am-topo) !important; width: auto !important; bottom: auto !important; display: flex !important; }
  body.modo-config main { margin-left: 0 !important; padding: 16px 14px calc(var(--am-abas) + 28px) !important; }
  body.modo-config nav.sub-modulo .cfg-cabeca { display: none; }
  body.modo-config nav.sub-modulo .cfg-grupo { display: contents; }
  body.modo-config nav.sub-modulo .cfg-grupo-titulo { display: none; }
  body.modo-config nav.sub-modulo button { width: auto !important; flex: 0 0 auto; }

  /* ---- "Mais": a lateral vira uma folha que sobe de baixo ---- */
  body.com-lateral aside.lateral,
  aside.lateral {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--am-abas) !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - var(--am-abas) - env(safe-area-inset-top, 0px) - 28px) !important;
    padding: 0 max(14px, env(safe-area-inset-right, 0px)) 14px max(14px, env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .6) !important;
    transform: translateY(calc(100% + var(--am-abas) + 20px)) !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .34s !important;
    z-index: 41 !important;
    visibility: hidden;
  }
  body.menu-aberto aside.lateral {
    transform: translateY(0) !important;
    visibility: visible;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), visibility 0s !important;
  }
  aside.lateral.am-puxando { transition: none !important; }
  aside.lateral.am-saindo { transition: transform .2s ease !important; }
  aside.lateral::before, aside.lateral::after { display: none !important; }
  body.menu-aberto::after {
    z-index: 40 !important;
    background: rgba(3, 5, 9, .5) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: am-veu .3s ease;
  }
  body.menu-aberto { overflow: hidden; }

  .am-alca { display: flex; justify-content: center; padding: 10px 0 4px; flex: 0 0 auto; cursor: grab; touch-action: none; }
  .am-alca i { width: 40px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); }
  body.portal-cliente .am-alca i { background: rgba(15, 23, 42, .18); }

  .lateral .topo-marca { display: none !important; }
  .lateral .menu-luz { display: none !important; }

  nav.menu,
  .lateral .menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px !important;
    padding: 2px 0 6px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    min-height: 0;
  }
  nav.menu .menu-grupo { grid-column: 1 / -1; margin: 10px 4px 0 !important; }
  nav.menu .menu-grupo:first-of-type { margin-top: 2px !important; }
  nav.menu > button,
  .lateral .menu > button {
    position: relative;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    min-height: 76px !important;
    max-height: none !important;
    padding: 12px 4px 10px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .05) !important;
    font-size: 11.5px !important;
    line-height: 1.15;
    text-align: center;
  }
  body.portal-cliente nav.menu > button { background: rgba(15, 23, 42, .04) !important; border-color: rgba(15, 23, 42, .06) !important; }
  nav.menu > button svg { width: 24px !important; height: 24px !important; flex: 0 0 auto; }
  nav.menu > button .rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav.menu > button.ativa { background: rgba(255, 90, 31, .14) !important; border-color: rgba(255, 90, 31, .35) !important; }
  nav.menu > button.ativa::before { display: none !important; }
  nav.menu > button .contador { position: absolute; top: 6px; right: 8px; margin: 0 !important; }

  .lateral .rodape-lateral { flex: 0 0 auto; padding-top: 10px !important; }

  /* ---- janelas viram folha que sobe de baixo ----
     As de tela cheia (editor de arte, ver anexo, recorte de foto) ficam como
     estao. */
  dialog[open]:not(.ea):not(.ver-anexo):not(.agr-janela):not(.am-sem-folha) {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 24px 24px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    animation: am-sobe .34s cubic-bezier(.22, 1, .36, 1) !important;
    transform-origin: bottom center;
  }
  dialog[open]:not(.ea):not(.ver-anexo):not(.agr-janela):not(.am-sem-folha)::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: -8px auto 12px;
    border-radius: 99px;
    background: currentColor;
    opacity: .18;
    position: relative;
    z-index: 2;
  }
  /* Dentro da folha nada rola de lado: o dedo que desce a lista nao pode
     sair arrastando a janela para os lados. */
  dialog[open]:not(.ea):not(.ver-anexo):not(.agr-janela):not(.am-sem-folha) { overflow-x: hidden !important; }
  dialog[open] form, dialog[open] form > *, dialog[open] [class*="corpo"] { min-width: 0; }

  dialog[open] :is(h1, h2, h3, header, .barra, .acoes, .pareamento) { flex-wrap: wrap; }
  dialog[open] :is(img, canvas, video) { max-width: 100%; }
  dialog[open] .pareamento > * { min-width: 0; }

  /* Lancar venda: os campos que dividiam a linha empilham. */
  .janela-venda .venda-corpo { padding: 14px 16px 18px !important; gap: 14px !important; grid-template-columns: minmax(0, 1fr) !important; }
  .janela-venda .venda-topo { grid-template-columns: minmax(0, 1fr) !important; }
  .janela-venda .venda-chave { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .janela-venda .venda-planos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .janela-venda .venda-linha { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .janela-venda .venda-acoes { flex-wrap: wrap !important; gap: 10px !important; }
  .janela-venda .venda-total { flex: 1 1 100% !important; }
  .janela-venda .venda-acoes > button { flex: 1 1 0 !important; justify-content: center; white-space: nowrap; }
  .venda-linha .cal-janela.cal-um-dia { right: 0 !important; left: auto !important; }

  dialog.am-puxando { transition: none !important; animation: none !important; }
  dialog.am-saindo { transition: transform .2s ease !important; }
  dialog[open] form > .acoes, dialog[open] .acoes:last-child {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
    z-index: 3;
    margin-bottom: calc(-18px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background: inherit;
    background-color: var(--painel, #10151d);
    border-top: 1px solid var(--linha);
  }

  /* ---- avisos: em cima, logo abaixo da barra, sem tapar as abas ---- */
  #avisos-pilha {
    top: calc(var(--am-topo) + 8px) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Barras que grudam no rodape da tela (confirmar, criar planejamento)
     param acima das abas em vez de ficar escondidas atras delas. */
  main .pn2-pe { bottom: calc(var(--am-abas) + 10px) !important; flex-direction: column; align-items: stretch !important; gap: 8px !important; padding: 10px 12px !important; }
  main .pn2-pe .pn2-pe-resumo { width: auto !important; min-width: 0; text-align: center; font-size: 12.5px; }
  main .pn2-pe .pn2-pe-resumo br { display: none; }
  main .pn2-pe > button { width: 100%; justify-content: center; }
  main .barra-confirmar { bottom: var(--am-abas) !important; }

  /* ---- WhatsApp: a central ocupa so o vao entre as duas barras ---- */
  .central { height: calc(100dvh - var(--am-topo) - var(--am-abas) - 30px) !important; min-height: 380px; }

  /* A dica do rosto so abre ao passar o mouse e saia da tela: no celular
     ela nao existe (o nome ja esta na conversa). */
  .wa-rosto-dica { display: none !important; }

  /* ---- Inicio: cabecalhos dos blocos (icone | titulo | numero, botao embaixo) ---- */
  .md-bloco > header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px !important; }
  .md-bloco > header > div { min-width: 0; }
  .md-bloco > header h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .md-bloco > header > button,
  .md-bloco > header > a { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .cabeca-bloco { flex-wrap: wrap !important; gap: 10px !important; }
  .cabeca-bloco > .titulo-bloco { flex: 1 1 100% !important; min-width: 0; width: auto !important; }
  .cabeca-bloco > :not(.titulo-bloco) { margin-left: 0 !important; }

  /* Cartao Producao do Inicio: o seletor de dia desce para a linha de baixo
     (lado a lado, ele espremia o subtitulo numa palavra por linha e cobria
     o titulo). O id ganha da regra do clientes.css que travava a linha. */
  #cartao-etapas .cabeca-bloco { flex-wrap: wrap !important; }
  #cartao-etapas .cabeca-bloco .titulo-bloco { flex: 1 1 100% !important; }
  #cartao-etapas .pd-dia { margin-left: 0 !important; width: 100%; justify-content: space-between; }
  #cartao-etapas .pd-rotulo { flex: 1 1 auto; width: auto !important; }

  /* Tarefas do Inicio: prazo e "Em producao / Pausar" descem para baixo do
     titulo, em vez de disputar a mesma linha e cobrir o nome do cliente. */
  .md-todo li:not(.md-vazio) { grid-template-columns: 26px minmax(0, 1fr) !important; align-items: start !important; row-gap: 10px !important; }
  .md-todo li:not(.md-vazio) > .md-check { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  .md-todo-lado { grid-column: 2; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start; gap: 8px !important; min-width: 0; }
  .md-todo-lado > * { max-width: 100%; }
  .md-todo-texto strong { overflow-wrap: anywhere; }
  .md-todo-tags { display: flex !important; flex-wrap: wrap; gap: 6px; }

  /* Em andamento (tarefa ao vivo): o prazo vai para baixo e o titulo
     aparece inteiro. */
  .mdv { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start !important; }
  .mdv-foto { grid-row: 1 / span 2; }
  .mdv-lado { grid-column: 2; grid-row: 2; justify-self: start; align-self: start !important; max-width: 100%; }
  .mdv-meio strong { white-space: normal !important; overflow-wrap: anywhere; }
  .mdv-lado .prazo-conta, .md-todo-lado .prazo-conta { white-space: normal !important; max-width: 100%; }
  .mdv-digitando { flex-wrap: wrap; }
  /* Em andamento (posts): o estado desce para baixo do titulo. */
  .md-post.md-vivo { grid-template-columns: auto minmax(0, 1fr) !important; }
  .md-post.md-vivo > .md-post-lado { grid-column: 2; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; justify-content: flex-start !important; }
  .md-post.md-vivo .md-post-texto strong { white-space: normal !important; overflow-wrap: anywhere; }

  /* ---- Ponto da pessoa (Equipe) ---- */
  .pt-topo { flex-wrap: wrap !important; }
  .pt-topo .pt-periodo-caixa { order: 3; flex: 1 1 100%; }
  .pt-topo .pt-periodo { width: 100%; justify-content: center; white-space: nowrap; }
  .pt-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px; background: var(--linha); }
  .pt-resumo > div { border: 0 !important; background: var(--fundo-alto, #0e141c); }
  .pt-resumo > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Detalhado: dia | regua | total em cima, as quatro batidas embaixo. */
  .pl-cab, .pl-linha { grid-template-columns: 40px minmax(0, 1fr) 74px !important; gap: 10px !important; padding: 0 10px !important; }
  .pl-linha { padding-top: 10px !important; padding-bottom: 10px !important; row-gap: 8px !important; }
  .pl-linha > .pl-dia { grid-column: 1; grid-row: 1; }
  .pl-linha > .pl-regua { grid-column: 2; grid-row: 1; }
  .pl-linha > .pl-total { grid-column: 3; grid-row: 1; }
  .pl-chips { grid-column: 1 / -1 !important; grid-row: 2; padding-bottom: 0 !important; gap: 5px !important; }
  .pl-chip { justify-content: center; padding-left: 4px !important; padding-right: 4px !important; white-space: nowrap; min-width: 0; font-size: 12px !important; }
  .pl-horas span:nth-child(even) { display: none; }
  .pl-total { text-align: right; min-width: 0; }
  .pl-total small { display: block; font-size: 10.5px !important; line-height: 1.2; white-space: normal; }
  .pl-cab-chips { display: none !important; }
  /* Calendario: cada dia mostra o total; as batidas aparecem ao tocar. */
  .pt-grade { gap: 4px !important; }
  .pt-semana { padding-left: 0 !important; text-align: center; font-size: .6rem !important; }
  .pt-cel { min-height: 52px !important; padding: 4px 3px !important; text-align: center; }
  .pt-cel-horas { display: none !important; }
  .pt-cel strong { font-size: .7rem !important; letter-spacing: -.02em; align-self: end; }
  .pt-cel.falta small { font-size: .55rem !important; line-height: 1.1; }

  /* ---- Tarefas: os cinco numeros em grade, sem cortar o rotulo ---- */
  .tl2-numeros { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; width: 100%; }
  .tl2-numeros > * { min-width: 0 !important; width: auto !important; }
  .tl2-numeros > * small, .tl2-numeros > * span { overflow-wrap: anywhere; }
  .tl2-barra { flex-wrap: wrap; }

  /* ---- Agenda: o titulo do banner nao divide a linha com os botoes ---- */
  .ag-banner { flex-wrap: wrap !important; align-items: flex-end; gap: 12px !important; }
  .ag-banner-texto { flex: 1 1 100% !important; min-width: 0; }
  .ag-banner-texto h1, .ag-banner-texto h2 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: clamp(26px, 8vw, 34px) !important; }

  /* ---- Pre-producao: a caixa de ideia em duas linhas ---- */
  .pre-captura { flex-wrap: wrap !important; }
  .pre-captura > input, .pre-captura > .campo, .pre-captura > label { flex: 1 1 calc(100% - 60px) !important; min-width: 0; }
  .pre-captura > .sel { flex: 1 1 0 !important; min-width: 0; }
  .pre-sugestoes { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .pre-sugestoes::-webkit-scrollbar { display: none; }
  .pre-sugestoes > * { flex: 0 0 auto; }

  /* ---- Planejamento: "por semana / no mes" um em cima do outro ---- */
  .pn2-un { flex-direction: column; width: 100%; }
  .pn2-un button { width: 100%; }
  .pn2-tipos { gap: 8px !important; }
  .pn2-tipo { padding: 12px 6px !important; min-width: 0; }

  /* ---- Ficha do cliente ---- */
  .pl-cliente-vazio { flex-wrap: wrap !important; gap: 12px !important; }
  .pl-cliente-vazio > div { flex: 1 1 calc(100% - 70px) !important; min-width: 0; }
  .pl-cliente-vazio h2 { font-size: clamp(24px, 7vw, 30px) !important; line-height: 1.1 !important; }
  .pl-cliente-vazio > button { flex: 1 1 100% !important; justify-content: center; }

  /* Posts do cliente: a tabela de cinco colunas vira lista de cartoes. */
  div:has(> .tabela-posts) { overflow-x: visible !important; }
  .tabela-posts { display: block; width: 100%; min-width: 0 !important; }
  .tabela-posts thead { display: none; }
  .tabela-posts tbody { display: block; }
  .tabela-posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .tabela-posts tr.linha-grupo { display: block; padding: 16px 0 6px; border-bottom: 0; }
  .tabela-posts td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0; }
  .tabela-posts tr.linha-grupo td { width: 100% !important; }
  .tabela-posts tr:not(.linha-grupo) td:nth-child(1) { flex: 0 0 auto; }
  .tabela-posts tr:not(.linha-grupo) td:nth-child(2) { flex: 1 1 calc(100% - 80px); }
  .tabela-posts tr:not(.linha-grupo) td:nth-child(3) { margin-left: auto; }

  /* Cronograma do cliente (aba Posts): os sete dias cabem na largura, como
     no calendario do mes. O "+" de cada dia continua a mao, pequeno. */
  .cartao > .calendario:not(.semana) { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; overflow-x: visible !important; min-width: 0 !important; }
  .cartao > .calendario:not(.semana) .cabecalho-dia { padding: 8px 2px !important; font-size: 9.5px !important; text-align: center; letter-spacing: .02em; overflow: hidden; }
  .cartao > .calendario:not(.semana) .dia { min-height: 64px !important; padding: 4px 3px 6px !important; min-width: 0; }
  .cartao > .calendario:not(.semana) .pastilha { height: 7px; min-height: 7px; margin: 3px 0 0 !important; padding: 0 !important; border-radius: 4px !important; overflow: hidden; font-size: 0 !important; gap: 0 !important; }
  .cartao > .calendario:not(.semana) .pastilha > * { display: none !important; }
  .cartao > .calendario:not(.semana) .dia-mais { width: 18px !important; height: 18px !important; top: 3px !important; right: 3px !important; bottom: auto !important; font-size: 13px !important; line-height: 16px !important; opacity: .8; }
  .cartao > .barra:has(> .so-icone) > h2 { flex: 1 1 100%; }

  /* Grades com coluna minima larga (300px+) estouravam no celular pequeno:
     a coluna minima passa a ser "300px ou a largura toda, o que for menor". */
  #md-andamento:has(.mdv),
  .md-saindo .md-lista,
  .pm-lista,
  .tl2-clientes,
  .grade-producao,
  .tl-grade,
  .pl-grade,
  .ag-inicio-lista,
  .grade-pessoas,
  .grade-listas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; }
  .pre-colunas,
  .ficha-grade,
  .prod-lateral,
  .riscos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
  .revisao { grid-template-columns: minmax(0, 1fr) !important; }
  .pre-pilha { min-width: 0; max-width: 100%; }

  /* Inicio: o seletor de periodo rola de lado; os grupos do cartao Producao
     empilham quando a tela nao comporta dois. */
  .md-dem-periodo { display: flex !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .md-dem-periodo::-webkit-scrollbar { display: none; }
  .md-dem-periodo button { flex: 0 0 auto; }

  /* ---- Quadros (Producao, Funil): uma coluna por vez, encaixando ---- */
  .prod-quadro, .kanban, .funil-colunas { scroll-snap-type: x proximity; scroll-padding: 0 14px; }
  .prod-quadro > *, .kanban > *, .funil-colunas > * { scroll-snap-align: start; }

  /* Botoes que flutuavam no canto de baixo sobem acima das abas. */
  .botao-flutuante, .fab, [class*="flutuante"]:not(.aviso-flutua):not(.am-fantasma) { bottom: calc(var(--am-abas) + 14px) !important; }
}

@keyframes am-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes am-veu { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   TRILHO (tablet em pe/deitado e celular deitado)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1100px), (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  :root { --am-trilho: calc(94px + env(safe-area-inset-left, 0px)); --lateral: var(--am-trilho); }

  button.abrir-menu { display: none !important; }
  body.menu-aberto::after { display: none !important; }
  html { overflow-x: hidden; }
  body.menu-aberto { overflow: visible; }

  body.com-lateral aside.lateral,
  aside.lateral {
    transform: none !important;
    width: var(--am-trilho) !important;
    max-width: none !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 6px calc(10px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px)) !important;
    gap: 6px !important;
    box-shadow: none !important;
    z-index: 40 !important;
    visibility: visible;
  }
  aside.lateral::before, aside.lateral::after { display: none !important; }
  .lateral .topo-marca { padding: 2px 0 8px !important; justify-content: center; }
  .lateral .logo { max-height: 26px !important; max-width: 60px !important; }
  .lateral .menu-luz { display: none !important; }

  nav.menu,
  .lateral .menu {
    display: flex !important;
    flex-direction: column;
    gap: 3px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
  }
  nav.menu::-webkit-scrollbar { display: none; }
  nav.menu .menu-grupo {
    flex: 0 0 auto;
    height: 1px;
    margin: 6px 14px !important;
    padding: 0;
    font-size: 0 !important;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
  }
  body.portal-cliente nav.menu .menu-grupo { background: rgba(15, 23, 42, .08); }
  nav.menu .menu-grupo:first-of-type { display: none; }
  nav.menu > button,
  .lateral .menu > button {
    position: relative;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    max-height: none !important;
    padding: 7px 0 6px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-align: center;
  }
  nav.menu > button svg { width: 22px !important; height: 22px !important; flex: 0 0 auto; }
  nav.menu > button .rotulo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  nav.menu > button.ativa::before { display: none !important; }
  nav.menu > button.ativa { background: rgba(255, 90, 31, .13) !important; }
  nav.menu > button .contador { position: absolute; top: 3px; right: 6px; margin: 0 !important; min-width: 16px; height: 16px; font-size: 9.5px; }

  /* Rodape do trilho: o ponto encolhe para um botao e o perfil fica so no rosto. */
  .lateral .rodape-lateral { flex: 0 0 auto; padding-top: 8px !important; gap: 6px !important; }
  .lateral .ponto-lateral { display: none !important; }
  .am-ponto:not([hidden]) {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 100%; min-height: 50px; padding: 6px 0 !important; border: 0 !important; border-radius: 14px !important;
    background: rgba(255, 255, 255, .04) !important; box-shadow: none !important;
    color: #8b95a5 !important; font-size: 10px; font-weight: 600;
  }
  body.portal-cliente .am-ponto { display: none !important; }
  .am-ponto svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.am-ponto-aberto .am-ponto { color: var(--destaque, #ff5a1f) !important; background: rgba(255, 90, 31, .13) !important; }
  body.am-ponto-aberto .lateral .ponto-lateral:not(:empty) {
    display: block !important;
    position: fixed;
    left: calc(var(--am-trilho) + 10px);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 300px;
    max-width: calc(100vw - var(--am-trilho) - 24px);
    padding: 14px !important;
    z-index: 60;
    border-radius: 18px !important;
    background: #10151d !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7) !important;
    animation: am-veu .2s ease;
  }
  .lateral .pessoa-cartao { flex-direction: column !important; gap: 6px !important; padding: 6px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  .lateral .pessoa-cartao::before, .lateral .pessoa-cartao::after { display: none !important; }
  .lateral .pessoa { justify-content: center !important; padding: 0 !important; width: auto !important; background: none !important; }
  .lateral .pessoa .dados { display: none !important; }
  .lateral .pessoa-sair { width: 36px !important; height: 32px !important; margin: 0 auto !important; }

  body.com-lateral main,
  body.com-lateral:has(.central) main {
    margin-left: var(--am-trilho) !important;
    max-width: none !important;
    padding-top: calc(22px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 22px !important;
    padding-right: max(22px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.com-lateral nav.sub-modulo {
    margin-left: var(--am-trilho) !important;
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 22px !important;
  }
  body:has(nav.sub-modulo:not([hidden])) main { padding-top: 14px !important; }
  body.modo-config nav.sub-modulo { left: var(--am-trilho) !important; }
  body.modo-config main { margin-left: var(--am-trilho) !important; }
  .central { height: calc(100dvh - 44px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 420px) {
  .pe-grupos { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Celular deitado: o trilho fica mais estreito para sobrar tela. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  :root { --am-trilho: calc(70px + env(safe-area-inset-left, 0px)); }
  .lateral .topo-marca { display: none !important; }
  nav.menu > button { min-height: 44px !important; font-size: 9.5px !important; }
  nav.menu > button svg { width: 20px !important; height: 20px !important; }
  nav.menu .menu-grupo { margin: 3px 12px !important; }
  .lateral .pessoa-sair { display: none !important; }
}

/* Prazo das tarefas: o calendario do botao "Data" abre embaixo dos atalhos. */
.md-atalhos { position: relative; flex-wrap: wrap; }
.md-atalhos > .cal-janela { top: 100%; right: 0; left: auto; }
.cal-atalhos[hidden] { display: none !important; }
.md-atalho-data { display: inline-flex; align-items: center; gap: 6px; }
.md-atalho-data svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 767.98px) { .md-atalhos > .cal-janela { right: auto; left: 0; } }
.md-atalhos:has(.md-atalho-data) { display: flex !important; flex-wrap: wrap; max-width: 100%; }
.md-atalhos:has(.md-atalho-data) > .md-atalho { flex: 1 1 auto; white-space: nowrap; justify-content: center; }
body > .cal-janela { position: fixed; }
/* Nova tarefa no celular: tudo numa coluna, nada passa da borda do cartao. */
@media (max-width: 767.98px) {
  .md-nova-opcoes:not([hidden]) { grid-template-columns: minmax(0, 1fr) !important; }
  .md-nova-opcoes > *, .md-nova-opcoes .md-tipo, .md-nova-opcoes .md-tipo-cliente { grid-column: 1 / -1 !important; min-width: 0; max-width: 100% !important; }
  .md-nova-opcoes .md-nova-detalhe, .md-nova-opcoes > select { width: 100%; }
  .md-nova-opcoes .md-hora { justify-self: start; }
  .md-nova-opcoes .md-criar { width: 100%; }
}

/* Troca de tela: a atual esmaece na hora do clique, enquanto a nova carrega
   (pela internet pode levar um instante; sem isso o clique parecia perdido). */
#conteudo.trocando-tela { opacity: .55; transition: opacity .15s ease .08s; }
#conteudo { transition: opacity .2s ease; }
/* Escritorio sem a luz/escurecimento do horario: sempre o visual padrao. */
.esc-luz { display: none !important; }