/* ============================================================
   GinecoLab - Manual Digital: estilos compartilhados dos
   componentes do faq.js (barra de utilidades, modal de FAQ e
   busca de funcao). Carregado pela landing (index.html) e pelos
   4 decks. Depende dos tokens de cor (--rose, --tint, --card...)
   definidos pela pagina host.
   ============================================================ */

/* barra fixa inferior-esquerda dos decks (espelha a .nav a direita, na MESMA base) */
.mtb{position:fixed;bottom:calc(clamp(10px,2vh,18px) + env(safe-area-inset-bottom,0px));
  left:calc(clamp(10px,2vw,22px) + env(safe-area-inset-left,0px));z-index:26;
  display:flex;align-items:center;gap:6px;opacity:.9;transition:opacity .35s var(--ease)}
.mtb:hover,.mtb:focus-within{opacity:1}
/* icones com bom contraste sobre qualquer fundo (tinta escura da marca + sombra leve) */
.mtb__b{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--rose-dd);
  font-family:var(--ss);font-size:.74rem;font-weight:600;padding:0 12px;height:36px;
  border-radius:9px;cursor:pointer;text-decoration:none;box-shadow:0 3px 10px rgba(120,60,50,.16);
  transition:all .22s var(--ease)}
.mtb__b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mtb__b:hover{background:var(--rose);color:#fff;border-color:var(--rose);transform:translateY(-1px)}
.mtb__b--wa{color:#0f7a41}
.mtb__b--wa:hover{background:#0f7a41;color:#fff;border-color:#0f7a41}
.mtb__ss{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 17px;
  margin-left:2px;border-radius:10px;background:rgba(255,255,255,.97);border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(120,60,50,.16);text-decoration:none;transition:all .22s var(--ease)}
.mtb__ss:hover{background:#fff;transform:translateY(-1px)}
.mtb__ss-l{font-family:var(--ss);font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.mtb__ss img{height:34px;width:auto;display:block}
.topbar-on-dark .mtb__b{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.34)}
.topbar-on-dark .mtb__b:hover{background:#fff;color:var(--rose-d)}
.topbar-on-dark .mtb__b--wa:hover{background:#0f7a41;color:#fff;border-color:#0f7a41}
/* o selo SeuSaude fica SEMPRE em chip branco com a logo colorida: legivel em
   qualquer fundo (a versao escura translucida apagava a marca nos slides salmao) */

/* ---------- modal generico (FAQ + busca) ---------- */
.mmodal-lock{overflow:hidden}
.mmodal-ov{position:fixed;inset:0;background:rgba(60,40,36,.42);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(14px,5vh,64px) 16px;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);backdrop-filter:blur(3px);overflow-y:auto}
.mmodal-ov.open{opacity:1;pointer-events:auto}
.mmodal{background:var(--card);border:1px solid var(--line2);border-radius:16px;width:100%;
  max-width:640px;max-height:calc(100vh - clamp(28px,10vh,128px));display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(120,60,50,.28);transform:translateY(14px) scale(.985);
  transition:transform .3s var(--ease);overflow:hidden}
.mmodal-ov.open .mmodal{transform:none}
.mmodal__h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line2);flex-shrink:0}
.mmodal__h h3{font-family:var(--sf);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink)}
.mmodal__x{background:var(--bg2);border:1px solid var(--line2);color:var(--muted);
  width:34px;height:34px;border-radius:9px;font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease)}
.mmodal__x:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.mmodal__b{padding:16px 18px;overflow-y:auto;flex:1;min-height:0}
.mmodal__b::-webkit-scrollbar{width:8px}
.mmodal__b::-webkit-scrollbar-thumb{background:var(--sand-d);border-radius:4px}

/* ---------- FAQ (acordeao) ---------- */
.mfaq__search,.msr__input{width:100%;font-family:var(--ss);font-size:1rem;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:12px 15px;
  margin-bottom:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.mfaq__search:focus,.msr__input:focus{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-tint)}
.mfaq__list{display:flex;flex-direction:column;gap:8px}
.mfaq__item{border:1px solid var(--line2);border-radius:11px;overflow:hidden;background:var(--card);transition:border-color .2s}
.mfaq__item.open{border-color:rgba(201,84,74,.32)}
.mfaq__q{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;
  border:none;cursor:pointer;padding:12px 14px;font-family:var(--ss);color:var(--ink)}
.mfaq__q:hover{background:var(--tint)}
.mfaq__cat{flex-shrink:0;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;background:var(--tint);color:var(--rose-d);border:1px solid var(--line)}
.mfaq__qt{flex:1;min-width:0;font-size:.95rem;font-weight:500;line-height:1.35}
.mfaq__ch{flex-shrink:0;width:11px;height:11px;border-right:2px solid var(--rose);border-bottom:2px solid var(--rose);
  transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:3px}
.mfaq__item.open .mfaq__ch{transform:rotate(-135deg)}
.mfaq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.mfaq__item.open .mfaq__a{max-height:360px}
.mfaq__a p{padding:0 14px 14px;font-size:.92rem;line-height:1.55;color:var(--muted)}
.mfaq__empty{display:none;padding:22px 6px;text-align:center;color:var(--muted);font-size:.92rem}

/* ---------- lista completa de recursos (modal "Ver todos os recursos") ---------- */
.mall__list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:2px 0 4px}
.mall__list li{position:relative;padding-left:22px;font-size:.94rem;line-height:1.5;color:var(--ink2)}
.mall__list li::before{content:'';position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--rose),var(--rose-l));box-shadow:0 0 0 3px var(--rose-tint)}
.mall__list b{color:var(--ink);font-weight:600}

/* ---------- busca de funcao (24/09/2026) ----------
   Resultados do motor unico busca-funcoes.js (classes .gbf-*), o mesmo da tela
   /manuais do ERP. No hub publico a lista abre SOBRE a pagina (nao empurra
   nada); dentro do modal dos decks ela fica no fluxo do modal. */
.gbf-lista{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;max-height:min(60vh,440px);
  overflow-y:auto;overscroll-behavior:contain;padding:6px;background:var(--card);border:1px solid var(--line2);
  border-radius:13px;box-shadow:0 14px 40px rgba(120,60,50,.14)}
.gbf-lista[hidden]{display:none}
.mmodal .gbf-lista{position:static;max-height:none;box-shadow:none;border:0;padding:0}
.gbf-op{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:48px;padding:7px 12px;
  border-radius:9px;color:var(--ink);text-decoration:none}
.gbf-op+.gbf-op{margin-top:2px}
.gbf-op:hover,.gbf-op.is-ativo{background:var(--tint)}
.gbf-op.is-ativo{box-shadow:inset 3px 0 0 var(--rose-d)}
.gbf-op__l1{font-size:.92rem;line-height:1.3}
.gbf-op__t{font-weight:700}
.gbf-op__cam{color:var(--rose-d);font-weight:500}
.gbf-op__d{font-size:.8rem;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbf-vazio,.gbf-conta{padding:10px 12px;font-size:.88rem;color:var(--muted)}
.gbf-conta{padding:6px 12px 4px;font-size:.76rem}
@media(max-width:600px){.gbf-op__d{white-space:normal}}
@media(pointer:coarse){.gbf-op{min-height:52px}}

@media(max-width:600px){
  /* alinha a barra na MESMA base do numero da pagina (.nav), opacidade cheia (sem hover no toque) */
  .mtb{gap:5px;opacity:1;
    left:calc(9px + env(safe-area-inset-left,0px));
    bottom:calc(9px + env(safe-area-inset-bottom,0px))}
  .mtb__b{padding:0 9px;height:34px;font-size:0}
  .mtb__b svg{width:17px;height:17px}
  .mtb__b span{display:none}
  .mtb__ss{height:38px;padding:0 12px 0 13px;gap:7px}
  .mtb__ss img{height:29px}
  .mfaq__cat{display:none}
}

/* Alvo de toque (26/08/2026): os botoes da barra de utilidades e o fechar do
   modal tinham 27 a 34px. Sobem para 44px sem mudar o icone. Ver deck.css. */
.mtb__b{min-height:44px}
.mmodal__x,.mmodal button[aria-label="Fechar"],.mmodal-ov button.x{width:46px;height:46px;min-width:46px;min-height:46px;flex:0 0 auto}
 .erp-feats__all{min-height:46px}
.mfaq__q,.mfaq li button,.mmodal li button{min-height:46px}
@media(max-width:600px){
  .mtb__b{height:44px;padding:0 12px}
  .mtb__ss{height:44px}
}

/* 24/09/2026: abaixo de 600px a barra de utilidades cobria "Indice e busca" e
   "Anterior" da navegacao do deck (.nav) em 320, 360 e 390 (12 de 16 medicoes,
   scripts/qa/manuais-2026-09-24/sobreposicao-barras.mjs). Os dois grupos nao
   cabem lado a lado nessa largura: a barra sobe para uma fileira propria acima
   da .nav, o selo SeuSaude sai no celular e o slide reserva a altura das duas
   fileiras para o fim do conteudo nao ficar embaixo delas. */
@media(max-width:600px){
  .mtb{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .mtb__ss{display:none}
  body .S{padding-bottom:calc(122px + env(safe-area-inset-bottom,0px))}
}

/* ---------------------------------------------------------------------------
   REVISÃO VISUAL (24/09/2026)
   1. Os três botões só de ícone da barra de utilidades mediam 43x44 no
      celular (largura abaixo de 44).
   2. O PNG da logomarca SeuSaúde tem 73% de margem transparente na altura:
      com 34px de altura a marca aparecia com 9px, ilegível. O recorte por
      object-fit mostra a marca inteira com 17px de altura.
   3. O "x" nativo do campo de busca vinha azul do navegador, fora da paleta.
   --------------------------------------------------------------------------- */
.mtb__b{min-width:44px;justify-content:center}
.mtb__ss img{height:18px;width:104px;object-fit:cover}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;margin-left:6px;cursor:pointer;background:var(--rose-d,#7F3029);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------------------------------------------------------------------------
   F3 (24/09/2026)
   1. Endereço dentro da resposta das perguntas frequentes (faq.js, ENDERECOS):
      mesmo tratamento do .apps-end dos decks.
   2. Celular baixo (até 600px de largura E de altura, ex.: 320x568): a barra de
      utilidades sobe para o canto superior direito, ao lado do logotipo, e a
      faixa de baixo fica só com a navegação. Antes o "Ver todos os recursos"
      nascia atrás da barra em 27 slides de 320x568 (capturar.mjs, alvo coberto);
      a faixa de 118px cai para 66px e o slide reserva só isso no fim.
   --------------------------------------------------------------------------- */
.mfaq__a .apps-end{font-weight:600;overflow-wrap:anywhere}
@media (max-width:600px) and (max-height:600px){
  .mtb{top:calc(15px + env(safe-area-inset-top,0px));bottom:auto;left:auto;right:calc(9px + env(safe-area-inset-right,0px))}
  body .S{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  body::after{height:calc(66px + env(safe-area-inset-bottom,0px))}
}