@import "tailwindcss";

/* pwa-safe-padding — padding inferior según SO (data-os lo setea el script inline de index.html):
   - Android: aplica siempre
   - iOS: solo cuando la app corre instalada como PWA (standalone)

   `pwa-safe-padding` aplica 40px por defecto.
   `pwa-safe-padding-<n>` usa la escala de spacing de Tailwind (igual que pb-<n>):
   pwa-safe-padding-0 = 0, pwa-safe-padding-1 = 4px, pwa-safe-padding-2 = 8px, etc.

   Nota: [data-os] como ancestro (sin :where) suma especificidad: (0,2,0) le gana a p-4 (0,1,0) */
@utility pwa-safe-padding {
    [data-os="android"] & {
        padding-bottom: 40px;
    }

    @media (display-mode: standalone) {
        [data-os="ios"] & {
            padding-bottom: 40px;
        }
    }
}

@utility pwa-safe-padding-* {
    [data-os="android"] & {
        padding-bottom: calc(var(--spacing) * --value(number));
    }

    @media (display-mode: standalone) {
        [data-os="ios"] & {
            padding-bottom: calc(var(--spacing) * --value(number));
        }
    }
}