/* ===================================================================
   mobile-enhance.css
   ---------------------------------------------------------------
   Ajustes exclusivos para celular. Tudo aqui está dentro de
   @media (max-width: ...) então em telas de desktop/computador
   NADA muda - o site continua exatamente como já é hoje.

   Objetivo: quando uma tabela (ou qualquer bloco) é larga demais
   para a tela do celular, em vez de "cortar" o conteúdo sem
   nenhum aviso, o usuário vê uma pista visual (sombra + textinho
   "arraste para o lado") avisando que dá pra arrastar/deslizar
   para o lado para ver o resto. O JS (mobile-enhance.js) é quem
   decide, em cada página, se essa pista deve aparecer (só aparece
   quando realmente existe conteúdo cortado).
   =================================================================== */

@media (max-width: 900px) {

  /* Container que embrulha uma tabela/bloco largo e permite arrastar
     o dedo para o lado para ver o restante. */
  .ebd-scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  /* Sombra nas bordas indicando que existe mais conteúdo pra cada lado.
     Só aparece quando o JS marcar (há overflow real). */
  .ebd-scroll-x.ebd-scroll-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.12));
  }

  .ebd-scroll-x.ebd-scroll-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.12));
    z-index: 1;
  }

  /* Avisinho "arraste para o lado", inserido pelo JS logo acima do
     bloco que tem overflow. Discreto, some sozinho depois do
     primeiro arraste (o JS remove a classe que o mostra). */
  .ebd-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: #6c757d;
    background: #f1f3f9;
    border-radius: 20px;
    padding: .35rem .9rem;
    margin: 0 0 .6rem;
    width: fit-content;
    animation: ebdSwipeAviso 1.6s ease-in-out infinite;
  }

  .ebd-swipe-hint i {
    font-size: .85rem;
  }

  @keyframes ebdSwipeAviso {
    0%, 100% { transform: translateX(0); opacity: .75; }
    50%      { transform: translateX(4px); opacity: 1; }
  }
}