/*
 * Ajustes móviles comunes a toda la web (se carga después del resto de hojas).
 *
 * Aquí van solo las reglas transversales: las de una vista concreta viven en
 * su plantilla. Breakpoints de Bootstrap 5: 575.98 (teléfono), 767.98, 991.98
 * (por debajo aparece la barra inferior).
 */

/* Ningún elemento suelto puede abrir scroll lateral en toda la página.
   clip (no hidden) para no romper position: sticky. */
html, body { overflow-x: clip; }

@media (max-width: 767.98px) {
    /* AOS fade-left/right/zoom-left… arrancan desplazados 100px a un lado y
       ensanchan la página antes de animarse: en móvil entran desde abajo. */
    [data-aos^="fade-left"]:not(.aos-animate),
    [data-aos^="fade-right"]:not(.aos-animate),
    [data-aos^="zoom-in-left"]:not(.aos-animate),
    [data-aos^="zoom-in-right"]:not(.aos-animate),
    [data-aos^="slide-left"]:not(.aos-animate),
    [data-aos^="slide-right"]:not(.aos-animate) {
        transform: translate3d(0, 24px, 0);
    }

    /* Imágenes y medios nunca más anchos que su contenedor */
    img, video, iframe, input[type="file"] { max-width: 100%; }
    img { height: auto; }

    /* Filas de acciones: que bajen de línea en vez de salirse */
    .btn-toolbar, .card-header .d-flex, .card-footer .d-flex { flex-wrap: wrap; }
    .d-flex:has(> .btn + .btn),
    .d-flex:has(> .btn + div > .btn),
    .d-flex:has(> a.btn + div),
    .d-flex.justify-content-between:has(.btn) { flex-wrap: wrap; row-gap: .5rem; }
}

@media (max-width: 991.98px) {
    /* iOS hace zoom al enfocar un campo con letra menor de 16px */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ---- Botones flotantes (asistente, mensajes, filtros) ---- */
@media (max-width: 991.98px) {
    /* La pestaña "Mensajes" de la barra inferior ya lleva al inbox */
    body:has(.gf-tabbar) .gf-hb-fab-msgs { display: none; }

    body:has(.gf-tabbar) .gf-hb-fab:not(.gf-hb-fab-msgs) { width: 48px; height: 48px; right: 14px; }
    body:has(.gf-tabbar) .gf-hb-fab svg { width: 24px; height: 24px; }
    body:has(.gf-tabbar) .gf-side-fab { padding: 9px 16px; font-size: .85rem; }

    /* Espacio al final para poder subir el último contenido por encima de los flotantes */
    body:has(.gf-tabbar) { padding-bottom: calc(var(--gf-tabbar-space, 60px) + 72px); }

    /* Con un modal, un off-canvas o el teclado abierto los flotantes estorban */
    body.modal-open .gf-hb-fab,
    body.modal-open .gf-side-fab,
    body:has(.offcanvas.show) .gf-hb-fab,
    body:has(.offcanvas.show) .gf-side-fab,
    body:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus:not(.gf-hb-panel *)) .gf-hb-fab,
    body:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus:not(.gf-hb-panel *)) .gf-side-fab {
        display: none !important;
    }
    /* La barra inferior también: si no, queda encima del final del modal */
    body.modal-open .gf-tabbar,
    body:has(.modal.show) .gf-tabbar { display: none !important; }
}

/* ---- Botones ---- */
@media (max-width: 575.98px) {
    /* .btn global (style.css) lleva padding 15x20 y letter-spacing .1rem pensado
       para la landing: en el teléfono parte etiquetas y desborda filas */
    .btn { padding: 11px 14px; letter-spacing: .03em; }
    .btn.btn-sm, .btn-group-sm > .btn { padding: 7px 10px; }
    .btn.btn-lg { padding: 13px 18px; }
}

/* ---- Modales de Bootstrap ---- */
@media (max-width: 575.98px) {
    /* Los modales largos se desplazan por dentro y no por detrás */
    .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-fullscreen) { margin: .75rem; }
    .modal-dialog:not(.modal-fullscreen-sm-down):not(.modal-dialog-scrollable) .modal-content {
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
    }
    .modal-footer { flex-wrap: wrap; }
}

/* ---- Pantallas de cuenta (recuperar / cambiar contraseña) ---- */
/* .hero p { color:#FFF !important } (style.css) pintaba de blanco el texto de la tarjeta blanca */
.hero .gf-auth-card p,
.hero .gf-auth-card label,
.hero .gf-auth-card li { color: #1a2733 !important; }
.gf-auth-card { border-radius: 12px; }
@media (max-width: 767.98px) {
    /* p-5 dentro de p-5 dentro de .container dejaba una columna de ~126px */
    .gf-auth-hero { padding: 1.5rem 0 2rem !important; }
    .gf-auth-hero > .container { padding-top: 1rem !important; }
    .gf-auth-hero .divider-football { margin-bottom: 1.25rem !important; }
    .gf-auth-card { padding: 1.25rem .5rem !important; margin: 0; }
    .gf-auth-card .modal-footer { padding-inline: 0; }
    .gf-auth-card .btn { width: 100%; }
}

/* ---- Tablas como tarjetas (clase gf-stack-mobile + js/gf-responsive.js) ---- */
@media (max-width: 767.98px) {
    table.gf-stack-mobile, table.gf-stack-mobile tbody, table.gf-stack-mobile tr,
    table.gf-stack-mobile td, table.gf-stack-mobile tbody th { display: block; width: 100%; }
    table.gf-stack-mobile thead { display: none; }
    table.gf-stack-mobile tbody tr { padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
    table.gf-stack-mobile td, table.gf-stack-mobile tbody th {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 4px 0 !important; border: 0 !important; text-align: right; min-width: 0;
        white-space: normal !important; overflow-wrap: anywhere; background: none;
    }
    table.gf-stack-mobile [data-label]::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 45%; text-align: left;
        font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7a8f;
    }
    /* La primera celda hace de título de la tarjeta */
    table.gf-stack-mobile tbody tr > :first-child { justify-content: flex-start; text-align: left; font-size: 1rem; }
    table.gf-stack-mobile tbody tr > :first-child::before { display: none; }
    table.gf-stack-mobile td[colspan] { display: block; text-align: center; }
    table.gf-stack-mobile .text-end { justify-content: space-between; }
    .table-responsive:has(> table.gf-stack-mobile), div:has(> table.gf-stack-mobile) { overflow-x: visible; }
}

/* ---- Tablas anchas de números: primera columna fija y pista de scroll ---- */
@media (max-width: 767.98px) {
    .gf-scroll-table { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .gf-scroll-table table { min-width: max-content; }
    .gf-scroll-table th.gf-sticky, .gf-scroll-table td.gf-sticky,
    .gf-scroll-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 4px 0 6px -4px rgba(0,0,0,.18); }
}

/* ---- Áreas táctiles mínimas en pantallas táctiles ---- */
@media (pointer: coarse) {
    .btn-sm { min-width: 36px; min-height: 36px; }
    /* El candado de seguidores es diminuto: se agranda el área sin mover el diseño */
    .follow-widget button.follow-lock { padding: 10px 12px; margin: -8px -6px; }
}