/* ==========================================================================
   Lab da Arte — base de comportamento em telas de toque
   Carregado em todas as páginas, DEPOIS do Tailwind (vence nos empates).

   Corrige o que não dá para resolver classe a classe:
   1. iOS dá zoom sozinho ao focar campo com fonte < 16px — e a página fica
      deslocada, sem voltar ao normal. É a queixa nº 1 de quem usa iPhone.
   2. Elemento decorativo que passa da largura cria scroll lateral: a pessoa
      arrasta a tela e o conteúdo "foge".
   3. Alvo de toque menor que ~44px erra o dedo.
   4. Barra fixa no rodapé some atrás da faixa inicial do iPhone.
   ========================================================================== */

/* ---------- 1. zoom automático do iOS ---------------------------------- */
/* Só campos de texto disparam o zoom; checkbox/radio/cor/arquivo não têm
   fonte visível, então ficam de fora para não inchar o layout. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* o iOS aumenta a fonte sozinho ao virar a tela; aqui mandamos manter */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* ---------- 2. nada de scroll lateral ---------------------------------- */
/* `clip` em vez de `hidden`: corta o excesso sem transformar o elemento em
   área rolável — `hidden` no html quebra `position: sticky` filho. */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

/* Enfeite de fundo (blur, círculo, gradiente) nunca deve empurrar a página. */
.floating-shape,
.deco-shape {
    max-width: 100vw;
}

/* ---------- 3. alvo de toque ------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* tira o atraso de ~300ms que o toque tem por padrão em link/botão */
    a, button, [role="button"], .tab-btn, .top-nav-item {
        touch-action: manipulation;
    }

    /* caixa de marcar minúscula é o campo que mais erra o dedo */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* botões do projeto: altura mínima confortável para o dedo */
    .btn-cta,
    .btn-lab,
    .btn-outline,
    .btn-primary,
    .btn-ghost,
    .btn-tour {
        min-height: 44px;
    }

    /* Botão só de ícone (dica, editar, excluir em linha de tabela) costuma
       medir ~20px e o dedo erra. O retângulo invisível amplia a área de toque
       sem mexer no desenho nem na altura da linha. */
    .btn-dica,
    .toque-amplo,
    td button,
    td a {
        position: relative;
    }

    .btn-dica::after,
    .toque-amplo::after,
    td button::after,
    td a::after {
        content: "";
        position: absolute;
        inset: -11px;
    }
}

/* ---------- 4. faixa inicial do iPhone --------------------------------- */
.safe-bottom {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ---------- 5. rolagem horizontal proposital --------------------------- */
/* Fila de abas/atalhos que passa da tela: rola com o dedo, com encaixe e sem
   barra à mostra. Quem usa: abas da Minha Gestão, menu dos hubs de curso. */
.rolagem-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.rolagem-x::-webkit-scrollbar {
    display: none;
}

.rolagem-x > * {
    scroll-snap-align: start;
}

/* A beirada esmaece enquanto ainda há conteúdo para o lado — é o que avisa
   que a fila rola. As classes são ligadas por /static/ui/mobile.js. */
.rolagem-esmaece.tem-mais-direita {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}

.rolagem-esmaece.tem-mais-esquerda {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent 100%);
}

.rolagem-esmaece.tem-mais-esquerda.tem-mais-direita {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* ---------- 6. tabela larga -------------------------------------------- */
/* Tabela de relatório não encolhe: ela rola dentro da própria caixa em vez de
   esticar a página inteira. */
.tabela-rolavel {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabela-rolavel > table {
    min-width: max-content;
}

/* ---------- 7. quebra de palavra --------------------------------------- */
/* E-mail e URL longos furam o card em tela estreita. */
@media (max-width: 768px) {
    .quebra-palavra,
    td, th, p, h1, h2, h3 {
        overflow-wrap: break-word;
    }
}

/* ---------- 8. animação: respeitar quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}