/**
 * index-inicio.css - Estilos para la página principal (meta-tarot.es/)
 * Contenedor auth: Entrar con Google, Instalar web app (solo Chrome), Descargar APK Android oficial
 */
/* Evitar capas duplicadas: solo el primer auth-header y container visibles */
body.page-inicio .auth-header ~ .auth-header,
body.page-inicio .container ~ .container {
    display: none !important;
}

/* ===== Chrome: forzar que el auth (Google, Instalar, Descargar) se vea y no lo tape otro contenedor ===== */
html[data-es-chrome="1"] body.page-inicio .auth-header {
    order: -1 !important;
    flex-shrink: 0 !important;
    min-height: 185px !important; /* A: Evitar Layout Shift */
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
}
html[data-es-chrome="1"] body.page-inicio #auth-buttons-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
}
html[data-es-chrome="1"] body.page-inicio .container {
    order: 0 !important;
    z-index: 1 !important;
}
/* Altura y scroll - 100dvh para Chrome móvil (barra navegador) */
html.page-inicio,
html.page-inicio.embedded-context,
html.page-inicio body.page-inicio {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body.page-inicio {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 2rem !important;
}
body.page-inicio .auth-header,
body.page-inicio .container {
    position: relative !important;
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.page-inicio .container {
    z-index: 1 !important;
}
body.page-inicio:not(.modal-abierto) .auth-header {
    z-index: 10 !important;
    display: flex !important;
    visibility: visible !important;
    /* A: Evitar Layout Shift - reservar espacio para ~3 botones antes de que el JS hidrate */
    min-height: 185px !important;
    padding: 1rem 1rem 1.5rem !important;
    justify-content: center !important;
    align-items: center !important;
}
body.page-inicio:not(.modal-abierto) #auth-buttons-container {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
    /* C: Gap constante, max-width, centrado */
    gap: 0.75rem !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}
body.page-inicio .auth-btn,
body.page-inicio .auth-btn.install-btn,
body.page-inicio a.apk-btn,
body.page-inicio button.apk-btn,
body.page-inicio #auth-buttons-container .auth-btn {
    width: 100% !important;
    max-width: 400px !important;
    min-height: 47px !important;
    margin: 0 !important;
}
/* Botón Instalar: visible solo en Chrome móvil (oculto en PC, IG, TikTok, Telegram, etc.) */
html[data-es-chrome="1"]:not([data-navegador-interno="1"]) body.page-inicio #btn-instalar-pwa {
    display: flex !important;
    visibility: visible !important;
}
html[data-navegador-interno="1"] body.page-inicio #btn-instalar-pwa,
html[data-pwa-instalada="1"] body.page-inicio #btn-instalar-pwa {
    display: none !important;
}
/* B: APK siempre visible en todos los navegadores móviles (Chrome, Brave, Firefox, etc.) */
body.page-inicio .auth-btn.apk-btn,
body.page-inicio a.apk-btn,
body.page-inicio button.apk-btn {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Texto bajo el botón APK (versión web / estado en app nativa) */
body.page-inicio .apk-oficial-hint {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: -0.35rem auto 0.5rem auto !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    font-size: clamp(0.65rem, 2vw, 0.78rem) !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-sizing: border-box !important;
}
body.page-inicio .container {
    display: block !important;
    /* C: Separación para que los botones no toquen el título Tarot Místico */
    padding-top: 0.5rem !important;
}
body.page-inicio .menu-section,
body.page-inicio .button-row,
body.page-inicio .eliminar-ads-inicio-row {
    overflow: visible !important;
    flex: none !important;
}

/* Acceso a “Eliminar videos publicitarios” (antes en Horóscopo General): encima del menú principal */
body.page-inicio .eliminar-ads-inicio-row {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem 0.75rem !important;
    display: flex !important;
    justify-content: center !important;
}
body.page-inicio .btn-eliminar-ads-inicio {
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 !important;
    cursor: pointer !important;
    border: none !important;
    font: inherit !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(236, 240, 241, 0.9) !important;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.35) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: clamp(0.72rem, 2.2vw, 0.88rem) !important;
}
body.page-inicio .btn-eliminar-ads-inicio:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(231, 76, 60, 0.45) !important;
}
body.page-inicio .menu-button {
    flex-shrink: 0 !important;
}

/* Zona visible para botones/contenido añadido dinámicamente (evita que quede oculto) */
body.page-inicio #contenido-añadido,
body.page-inicio .contenido-añadido-zona {
    display: block !important;
    visibility: visible !important;
    padding: 1.5rem 1rem !important;
    margin-top: 1rem !important;
    min-height: 60px !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

/* Desactivar contain de performance.css */
body.page-inicio .container,
body.page-inicio .menu-section,
body.page-inicio .button-row {
    contain: none !important;
}

/* Permitir zoom en menú inferior (touch-action: manipulation bloquea doble-toque pero permite pinch) */
/* Override pan-y que puede bloquear pinch-zoom en áreas con overflow */
body.page-inicio .container,
body.page-inicio .menu-section,
body.page-inicio .button-row {
    touch-action: manipulation !important;
}

/* Evitar que otra capa cubra el menú: subir z-index y asegurar que reciba eventos */
body.page-inicio .container {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate;
}
body.page-inicio .menu-section,
body.page-inicio .button-row,
body.page-inicio .eliminar-ads-inicio-row {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

/* Móvil: auth visible, botones en columna */
@media (max-width: 768px) {
    body.page-inicio:not(.modal-abierto) .auth-header,
    body.page-inicio:not(.modal-abierto) #auth-buttons-container {
        display: flex !important;
        visibility: visible !important;
    }
    body.page-inicio:not(.modal-abierto) #auth-buttons-container {
        flex-direction: column !important;
    }
    body.page-inicio:not(.modal-abierto) .auth-btn.auth-btn-google,
    body.page-inicio:not(.modal-abierto) #btn-google-entrar,
    body.page-inicio:not(.modal-abierto) .auth-btn.install-btn,
    body.page-inicio:not(.modal-abierto) .auth-btn.apk-btn,
    body.page-inicio:not(.modal-abierto) a.apk-btn,
    body.page-inicio:not(.modal-abierto) button.apk-btn {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Anular barra fija móvil en page-inicio */
@media (max-width: 768px) {
    html body.page-inicio .menu-section,
    html body.page-inicio .button-row {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        display: flex !important;
        z-index: auto !important;
    }
}

/* Desktop: Instalar y APK visibles */
@media (min-width: 769px) {
    body.page-inicio:not(.modal-abierto) .auth-btn.apk-btn,
    body.page-inicio:not(.modal-abierto) a.apk-btn,
    body.page-inicio:not(.modal-abierto) button.apk-btn {
        display: inline-flex !important;
        visibility: visible !important;
    }
}

/* Desktop: grid 2 columnas en menú */
@media (min-width: 769px) {
    body.page-inicio .button-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.9rem !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* WebView: scroll táctil */
html.page-inicio.embedded-context body.page-inicio {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Modales: ocultar auth y menú */
body.page-inicio.modal-abierto .menu-section,
body.page-inicio.modal-abierto .button-row,
body.page-inicio.modal-abierto .eliminar-ads-inicio-row,
body.page-inicio.modal-abierto .auth-header {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Footer en WebView */
html.page-inicio.embedded-context .site-footer {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 2rem !important;
    padding-top: 2rem !important;
}

/* Por encima de display:flex de esta hoja: sin sesión o gracia post-registro (config.js) */
html.tarot-monetization-ads-off body.page-inicio .eliminar-ads-inicio-row,
html.tarot-monetization-ads-off body.page-inicio .btn-eliminar-ads-inicio,
html.tarot-monetization-ads-off body.page-inicio #btnEliminarAdsInicio {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}