/* Evita flash de elementos Alpine.js antes da inicialização */
[x-cloak] { display: none !important; }

/* Exceção: sidebar do dashboard deve permanecer visível no desktop mesmo com
   x-cloak ativo. Sem isso o <aside> ficaria invisível até o Alpine inicializar,
   causando um salto de layout em telas largas. No mobile (< 1024px) o x-cloak
   permanece ocultando o sidebar — esse é exatamente o comportamento desejado
   para eliminar o flash do menu aberto ao carregar a página. */
@media (min-width: 1024px) {
    aside[x-cloak] { display: flex !important; }
}

/* ── Layout de conteúdo do dashboard ────────────────────────────────────────
   O seletor "header.lg\:hidden ~ .overflow-y-auto" alcança o container
   rolável de TODOS os templates do dashboard (desktop e mobile). Em desktop
   o header existe no DOM com display:none mas ainda serve de âncora para o
   seletor ~, sem necessidade de alterar cada template individualmente.

   padding-bottom: o chrome do browser (barra de URL, bottom toolbar,
   safe area do iOS) pode encobrir o último elemento da página — o scroll
   parava antes do final do conteúdo em praticamente todas as telas.
   max(2rem, env(safe-area-inset-bottom)) garante ao menos 32 px de folga
   e respeita o indicador de home do iPhone (≈34 px) quando presente.
────────────────────────────────────────────────────────────────────────────── */
header.lg\:hidden ~ .overflow-y-auto {
    padding-bottom: 2rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)); /* progressive enhancement */
}

/* ── Cabeçalho mobile — sem position:fixed ─────────────────────────────────
   position:fixed dentro de containers com overflow:hidden é um bug documentado
   no iOS Safari: o elemento fica ancorado ao ancestor overflow (não ao viewport).
   Resultado: após o teclado virtual aparecer/desaparecer, o header pode ficar
   preso fora do viewport e sumir permanentemente.

   A correção estrutural usa interactive-widget=resizes-content no viewport meta
   (iOS 16+ / Chrome 108+): o browser redimensiona o layout ao invés de fazer
   panning quando o teclado aparece. O header permanece visível naturalmente.
   Em browsers mais antigos, o header pode sumir brevemente durante digitação
   — comportamento aceitável — mas retorna assim que o teclado fecha graças ao
   window.scrollTo(0,0) no reset() de checkin.js.

   Nenhum padding-top adicional é necessário: o header está no fluxo flex normal
   (h-14 = 56px) e o div scrollável abaixo recebe o restante da altura via flex-1.
────────────────────────────────────────────────────────────────────────────── */

/* Esconde scrollbar mantendo funcionalidade de scroll */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Momentum scrolling suave em iOS */
.scroll-touch { -webkit-overflow-scrolling: touch; }

/* Área segura para bottom nav em iPhones com notch */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Truncamento multi-linha (fallback para Tailwind < v3.3) */
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cursor de arraste para carrosséis desktop */
.cursor-grabbing { cursor: grabbing !important; }

/* ── Typography Scale Upgrade ──────────────────────────────
   v2: feedback contínuo de usuários — fontes pequenas demais.
   Escala revisada com foco em WCAG AA, conforto e premium UX.

   Filosofia: cada classe sobe 1–1.5px para manter proporção
   sem quebrar layouts existentes. O efeito acumulado é
   significativo: todo text-xs (badge, header, label) vai de
   12 px → 14 px (+17%); todo text-sm (body principal) vai
   de 14 px → 15.5 px (+11%). Inputs, botões, tabelas e cards
   ficam sensivelmente mais legíveis com zero refactor de grid.
────────────────────────────────────────────────────────── */

/* text-xs: 12px → 14px  (badges, labels, table headers, timestamps) */
.text-xs {
    font-size: 0.875rem;   /* 14px */
    line-height: 1.55;
}

/* text-sm: 14px → 15.5px  (body principal, nav, botões, cells) */
.text-sm {
    font-size: 0.96875rem; /* 15.5px */
    line-height: 1.6;
}

/* text-base: mantém 16px mas com line-height mais arejado */
.text-base {
    line-height: 1.65;
}

/* Linha base global de leitura — conforto e acessibilidade */
p, span, li, td, th, label, input, select, textarea, button {
    line-height: 1.6;
}

/* Inputs e selects herdam tamanho de fonte dos utilitários Tailwind */
input, select, textarea { font-size: inherit; }

/* Touch targets mínimos WCAG — botões e links interativos */
button, a[role="button"], [role="tab"] {
    min-height: 2.25rem; /* 36px — alinhado com WCAG 2.5.5 */
}

/* Melhora espaçamento de leitura em tabelas */
table {
    border-spacing: 0;
}