/* ============================================================
   LOUVORAPP - Modo App Mobile Compacto
   Padrão de design mobile-first estilo Shopee / Mercado Livre
   Breakpoints: <=420px (modo app) | <=350px (ultra compacto)
   ============================================================ */

/* ----- Fundamentos tácteis ----- */
html {
    -webkit-tap-highlight-color: transparent;
}
button, a, select, label[for] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* ============================================================
   MODO APP (até 420px)
   ============================================================ */
@media (max-width: 420px) {

    /* ---------- Tipografia compacta ---------- */
    body { font-size: 14px; }
    .text-4xl { font-size: 24px !important; line-height: 1.15 !important; }
    .text-3xl { font-size: 20px !important; line-height: 1.2 !important; }
    .text-2xl { font-size: 18px !important; line-height: 1.25 !important; }
    .text-xl  { font-size: 16px !important; }
    .text-lg  { font-size: 15px !important; }
    .text-sm  { font-size: 13px !important; }
    label { font-size: 12px !important; }

    /* ---------- Densidade de conteúdo ---------- */
    .p-8  { padding: 1.25rem !important; }
    .p-6  { padding: 1rem !important; }
    .p-5  { padding: 0.875rem !important; }
    .p-4  { padding: 0.75rem !important; }
    .p-3  { padding: 0.625rem !important; }
    .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
    .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .px-3 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
    .py-4 { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
    .py-3 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }

    .gap-8    { gap: 1rem !important; }
    .gap-6    { gap: 0.875rem !important; }
    .gap-5    { gap: 0.75rem !important; }
    .gap-4    { gap: 0.75rem !important; }
    .space-y-6 > * + * { margin-top: 0.875rem !important; }
    .space-y-5 > * + * { margin-top: 0.75rem !important; }
    .space-y-4 > * + * { margin-top: 0.625rem !important; }
    .space-y-3 > * + * { margin-top: 0.5rem !important; }
    .mb-8  { margin-bottom: 1.25rem !important; }
    .mb-6  { margin-bottom: 1rem !important; }
    .mb-4  { margin-bottom: 0.75rem !important; }
    .mt-8  { margin-top: 1.25rem !important; }
    .mt-6  { margin-top: 1rem !important; }

    .rounded-3xl { border-radius: 1rem !important; }
    .rounded-2xl { border-radius: 0.875rem !important; }

    /* ---------- Inputs e formulários ---------- */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="url"], input[type="date"], input[type="number"],
    input[type="search"], select, textarea {
        font-size: 14px !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        border-radius: 0.75rem !important;
    }
    textarea { font-size: 13px !important; }
    input[type="file"] { font-size: 11px !important; }
    input[type="checkbox"], input[type="radio"] { width: 1.05rem !important; height: 1.05rem !important; }

    /* ---------- Prevenção de overflow em flex ---------- */
    nav form, nav form input { min-width: 0 !important; }
    .flex, .grid { max-width: 100%; }
    img { max-width: 100%; height: auto; }

    /* ---------- Botões ---------- */
    button[type="submit"], .bg-brand, .bg-primary-500, .bg-blue-600 {
        font-size: 13px !important;
    }

    /* ============================================================
       NAVEGAÇÃO (header.php)
       ============================================================ */
    #mobile-nav {
        height: 56px !important;
        padding: 0.5rem 0.25rem !important;
    }
    #mobile-nav i { font-size: 1.05rem !important; }
    #mobile-nav span { font-size: 8px !important; }
    main.flex-1.p-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    main .pb-\[90px\] { padding-bottom: 64px !important; }

    #sidebar { width: 260px; }
    #sidebar .h-16 { height: 3.5rem; }

    /* ============================================================
       PORTAL (público)
       ============================================================ */
    nav .h-16 { height: 3.5rem !important; }
    nav .text-lg { font-size: 15px !important; }
    nav input[name="q"] { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; font-size: 12px !important; }
    nav .px-4 { padding-left: 0.65rem !important; padding-right: 0.65rem !important; }
    nav .py-2 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
    .pt-24 { padding-top: 4.75rem !important; }
    .pt-20 { padding-top: 4.5rem !important; }

    /* Slides */
    .slide-container-1, [class*="slide-container-"] { min-width: 0; }
    section .p-6 { padding: 1rem !important; }
    section .sm\:p-10 { padding: 1rem !important; }
    section .text-3xl { font-size: 20px !important; }
    section .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    section .py-3 { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }

    /* Grids do portal */
    .grid.lg\:grid-cols-2.gap-8.mb-12 { margin-bottom: 2rem !important; }
    .p-5 { padding: 0.875rem !important; }
    .text-\[10px\] { font-size: 9px !important; }

    /* Bottom nav do portal */
    nav.sm\:hidden.p-3 { padding: 0.45rem !important; }
    nav.sm\:hidden .w-12.h-12 { width: 2.65rem !important; height: 2.65rem !important; -webkit-margin-top-collapse: separate; }
    nav.sm\:hidden .-mt-10 { margin-top: -2.1rem !important; }
    nav.sm\:hidden span { font-size: 8px !important; }
    nav.sm\:hidden i { font-size: 1rem !important; }

    /* ============================================================
       HOME / CATÁLOGO DE MÚSICAS
       ============================================================ */
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 { gap: 0.625rem !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 > div .p-4 { padding: 0.75rem !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .sm\:p-5 { padding: 0.75rem !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .text-base { font-size: 15px !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .py-2 { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .min-w-\[60px\] { min-width: 52px !important; }

    /* Filtros da home */
    .flex.flex-col.md\:flex-row .p-3 { padding: 0.65rem !important; }
    .relative.w-64 { width: 100% !important; }
    .flex.flex-wrap.gap-2.w-full { gap: 0.5rem !important; }
    .px-10 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .px-12 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .w-10.h-10 { width: 2.25rem !important; height: 2.25rem !important; }
    .w-8.h-8 { width: 1.9rem !important; height: 1.9rem !important; }

    /* FAB */
    .fixed.bottom-\[100px\].right-6.w-14.h-14 {
        width: 3rem !important;
        height: 3rem !important;
        right: 1rem !important;
        bottom: 68px !important;
        font-size: 1.15rem !important;
        border-radius: 1rem !important;
    }

    /* ============================================================
       DASHBOARD
       ============================================================ */
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 { gap: 0.625rem !important; }
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .p-6 { padding: 0.75rem !important; }
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-3xl { font-size: 1.4rem !important; }
    .grid.gap-8.lg\:grid-cols-3 { gap: 1.25rem !important; }
    .grid.gap-4.sm\:grid-cols-2 > a { padding: 0.75rem !important; }
    .grid.gap-4.sm\:grid-cols-2 > a .p-3 { padding: 0.55rem !important; }
    .space-y-3 .p-4 { padding: 0.75rem !important; }

    /* ============================================================
       FORMULÁRIOS (música, repertório, perfil, membros, etc.)
       ============================================================ */
    .max-w-2xl.mx-auto.bg-cardbg.p-6,
    .bg-cardbg.p-6.rounded-xl.border,
    .bg-cardbg.p-6.rounded-2xl.border,
    .bg-slate-800.p-6.rounded-2xl,
    .bg-slate-800.p-6.rounded-xl { padding: 0.875rem !important; }
    .px-4.py-3.text-white { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .px-4.py-3.text-white, input.px-4.py-3, textarea.px-4.py-3 {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }
    form .flex.gap-2 button, form .flex.gap-3 button { font-size: 12px !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* ============================================================
       VISUALIZADOR DE CIFRA (admin)
       ============================================================ */
    header .text-2xl { font-size: 18px !important; }
    header .text-lg { font-size: 14px !important; }
    .control-btn, .control-group button {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        font-size: 11px !important;
    }
    .control-group .px-2 { padding-left: 0.45rem !important; padding-right: 0.45rem !important; }
    .bg-cardbg.p-3.sm\:p-5.md\:p-8 { padding: 0.6rem !important; }
    .cifra-content { font-size: 14px !important; }
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 { gap: 0.5rem !important; }
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 .py-3 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 .px-4 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }

    /* ============================================================
       REINICIALIZAÇÃO DE REPERTÓRIO
       ============================================================ */
    .max-w-4xl.mx-auto header { margin-bottom: 1rem !important; }
    .max-w-4xl.mx-auto header .text-4xl { font-size: 22px !important; }
    .sticky.top-24 { position: static !important; }
    .bg-cardbg.p-6.rounded-xl.border.border-gray-800.shadow-lg { padding: 0.875rem !important; }

    /* ============================================================
       MEMBROS / USUÁRIOS
       ============================================================ */
    .grid.lg\:grid-cols-3.gap-8 { gap: 1rem !important; }
    .divide-y .p-4 { padding: 0.7rem !important; }
    .w-24.h-24 { width: 5rem !important; height: 5rem !important; }

    /* ============================================================
       PERFIL
       ============================================================ */
    .w-32.h-32 { width: 5.5rem !important; height: 5.5rem !important; }
    .p-8.text-center { padding: 1.25rem !important; }

    /* ============================================================
       AVISOS
       ============================================================ */
    .space-y-4 .bg-cardbg.rounded-xl.border.p-6 { padding: 0.875rem !important; }

    /* ============================================================
       SETTINGS / HERO MANAGER / EDITOR LANDING
       ============================================================ */
    .grid.grid-cols-2.gap-6 { gap: 0.625rem !important; }
    .grid.grid-cols-2.gap-4 { gap: 0.625rem !important; }
    .grid.grid-cols-2.gap-4 > div { min-width: 0; }
    .grid.grid-cols-2.gap-6 input[type="color"], .h-10.w-10, .h-11.w-20 { width: 2.6rem !important; height: 2.6rem !important; }
    .file\:px-4 { font-size: 10px !important; }
    .text-3xl.flex.items-center.gap-3 { font-size: 18px !important; }
    .max-w-6xl.mx-auto.p-4.sm\:p-6 { padding: 0.625rem !important; }

    /* Cores picker editor landing */
    .flex.gap-3 > input.flex-1 { min-width: 0; }

    /* Hero manager: cabeçalho empilhado em toda a faixa mobile */
    .max-w-6xl.mx-auto .flex.items-center.justify-between.mb-8 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.625rem !important;
    }
    .max-w-6xl.mx-auto .flex.items-center.justify-between.mb-8 .flex.gap-2 { width: 100% !important; }
    .max-w-6xl.mx-auto .flex.items-center.justify-between.mb-8 .flex.gap-2 a {
        flex: 1 !important;
        text-align: center !important;
        padding: 0.5rem 0.4rem !important;
        font-size: 11px !important;
    }

    /* ============================================================
       LOGIN
       ============================================================ */
    .bg-slate-800.p-6.sm\:p-8.rounded-2xl { padding: 1rem !important; }
    .h-16.mx-auto.mb-4 { height: 3rem !important; margin-bottom: 0.75rem !important; }
    .mb-8.text-center { margin-bottom: 1.25rem !important; }

    /* ============================================================
       LANDING
       ============================================================ */
    nav .h-20 { height: 3.5rem !important; }
    nav .max-w-7xl.mx-auto.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    nav .h-10.w-auto { height: 2rem !important; }
    nav .text-xl { font-size: 15px !important; }
    .pt-32 { padding-top: 5.5rem !important; }
    .pb-20 { padding-bottom: 3.5rem !important; }
    .max-w-7xl.mx-auto.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .hero-gradient .text-4xl { font-size: 26px !important; }
    .hero-gradient .md\:text-6xl { font-size: 26px !important; }
    .hero-gradient .text-lg { font-size: 14px !important; }
    .hero-gradient .px-8.py-4 { padding: 0.75rem 1.25rem !important; font-size: 15px !important; }
    .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .py-12 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section .p-8.rounded-3xl { padding: 1rem !important; }
    section .w-14.h-14 { width: 2.6rem !important; height: 2.6rem !important; font-size: 1rem !important; }
    section .mb-20 { margin-bottom: 2rem !important; }
    .max-w-4xl.mx-auto.px-6.text-center h2 { font-size: 22px !important; }
    .max-w-4xl.mx-auto.px-6.text-center p { font-size: 13px !important; }
    .px-10.py-5 { padding: 0.75rem 1.5rem !important; font-size: 15px !important; }
    .flex.items-center.justify-center.gap-6 { gap: 1rem !important; }
}

/* ============================================================
   ULTRA COMPACTO (até 350px)
   ============================================================ */
@media (max-width: 350px) {

    body { font-size: 13px; }

    /* Títulos ainda menores */
    .text-4xl { font-size: 20px !important; }
    .text-3xl { font-size: 17px !important; }
    .text-2xl { font-size: 16px !important; }

    /* Densidade máxima */
    .p-4 { padding: 0.625rem !important; }
    .p-5 { padding: 0.75rem !important; }
    .gap-4 { gap: 0.625rem !important; }
    .gap-3 { gap: 0.5rem !important; }
    .gap-2 { gap: 0.375rem !important; }
    .space-y-3 > * + * { margin-top: 0.4rem !important; }

    /* Inputs mais baixos */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="url"], input[type="date"], input[type="number"], select {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 13px !important;
    }

    /* Cards de música: botões de ação quase sem texto */
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .min-w-\[60px\] { min-width: 0 !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .text-\[9px\] { font-size: 8px !important; }
    .grid.gap-4.md\:grid-cols-2.lg\:grid-cols-3 .max-w-\[150px\] { max-width: 100px !important; }

    /* Portal: títulos de slide e seções */
    section .text-3xl { font-size: 17px !important; }
    section .text-\[10px\] { font-size: 8px !important; }
    nav input[name="q"] { font-size: 11px !important; }

    /* Controles de cifra: apenas ícones compactos */
    .control-btn, .control-group button { font-size: 10px !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .cifra-content { font-size: 13px !important; }

    /* FAB menor ainda */
    .fixed.bottom-\[100px\].right-6.w-14.h-14 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        border-radius: 0.875rem !important;
    }

    /* Dashboard stats viram 2 colunas apertadas */
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 > .sm\:col-span-2 { grid-column: span 2 !important; }
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-3xl { font-size: 1.2rem !important; }
    .grid.gap-4.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-xl { font-size: 14px !important; }

    /* Login ultra compacto */
    .bg-slate-800.p-6.sm\:p-8.rounded-2xl { padding: 0.875rem !important; }
    .max-w-md .space-y-4 { gap: 0; }

    /* Formulários: grid 2 col vira 1 col */
    .grid.md\:grid-cols-2.gap-5 { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    .grid.md\:grid-cols-2.gap-6 { grid-template-columns: 1fr !important; gap: 0.75rem !important; }

    /* Landing hero */
    .hero-gradient .text-4xl { font-size: 22px !important; }
    .hero-gradient .md\:text-6xl { font-size: 22px !important; }
    .hero-gradient .px-8.py-4 { padding: 0.65rem 1rem !important; }
    .max-w-4xl.mx-auto.px-6.text-center h2 { font-size: 19px !important; }

    /* Repertório: linha de ações em coluna */
    .mt-8.flex.flex-wrap.gap-3 { flex-direction: column !important; }
    .mt-8.flex.flex-wrap.gap-3 > * { width: 100% !important; }
    .mt-8.flex.flex-wrap.gap-3 form { flex: none !important; }

    /* Avisos: título e botão empilhados */
    .flex.justify-between.items-center.mb-8 { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; }
    .flex.justify-between.items-center.mb-8 h1 { text-align: left !important; }
    .flex.justify-between.items-center.mb-8 button, .flex.justify-between.items-center.mb-8 a { width: 100% !important; text-align: center !important; }

    /* Form music: botão Buscar compacto */
    .flex.gap-2 button[onclick="buscarCifra()"] { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
    .flex.gap-2 button[onclick="buscarCifra()"] span { display: none !important; }

    /* Repertório form: filtro de músicas por baixo do título */
    .flex.justify-between.items-center.mb-6 { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; }
    .flex.justify-between.items-center.mb-6 .relative.w-64 { width: 100% !important; }

    /* Visualizador público: nav e conteúdo mais compactos */
    .max-w-4xl.mx-auto.p-4.sm\:p-6 { padding: 0.75rem !important; }
    nav.p-4 { padding: 0.625rem !important; }

    /* Bottom nav portal ainda mais fino */
    #mobile-nav { height: 52px !important; }
    main .pb-\[90px\] { padding-bottom: 60px !important; }
}