/* ==========================================================================
   GesFut - Adaptación a móvil (tanda 1: la base común)
   --------------------------------------------------------------------------
   Punto de corte ÚNICO: 820px. Todo lo de aquí vive dentro de
   @media (max-width: 820px), así que en escritorio no cambia absolutamente
   nada. La única excepción está justo debajo y es obligatoria: el botón de
   menú es un elemento NUEVO y hay que esconderlo para que el escritorio siga
   viéndose igual que antes.

   Este fichero se enlaza el ÚLTIMO, después de los <style> de cada plantilla,
   para poder sobreescribirlos.

   Pendiente para las tandas siguientes: tablas de datos y calendarios.
   ========================================================================== */

/* Único selector fuera del @media: oculta en escritorio el botón hamburguesa,
   que antes no existía. Sin esto aparecería también en pantalla grande. */
.nav-toggle { display: none; }

@media (max-width: 820px) {

    /* ---------------------------------------------------------------
       1. Nada de ancho fijo: que nada se salga de la pantalla
       --------------------------------------------------------------- */
    *, *::before, *::after { box-sizing: border-box; }

    img, svg, video, canvas, iframe { max-width: 100%; }
    table { max-width: 100%; }

    /* Contenedores de página de todas las pantallas. Casi todos ya usaban
       max-width (bien), pero además llevaban width: calc(100% - 48px) y
       márgenes que en un móvil se comen media pantalla. */
    .page-wrap,
    .main-content,
    .main-content#mainContent,
    .ej-shell,
    .sd-wrapper,
    .home-summary,
    .news-section,
    .section-card {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-wrap, .main-content, .main-content#mainContent, .ej-shell {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Ventanas modales: en móvil ocupan lo que hay, no 560/660/700px. */
    .modal-content, .gen-modal, .wa-modal, .preview-popup, .modal > div {
        max-width: 96vw !important;
        width: 96vw !important;
    }

    /* La barra superior se aprieta y el título largo no debe empujar. */
    .topbar { padding: 0 10px; }
    .topbar-title { font-size: 1.15em; }
    .topbar-user { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; }
    .topbar-logout { padding: 7px 10px; font-size: 0.85em; }

    /* ---------------------------------------------------------------
       2. Navegación: menú hamburguesa
       --------------------------------------------------------------- */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #444e5a;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 1.5em;
        line-height: 1;
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        cursor: pointer;
    }
    .nav-toggle:hover { background: #3a4a5d; }

    /* El menú arranca plegado y se despliega en vertical. */
    .main-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }
    .main-nav.abierto { display: flex; }

    /* Los desplegables se abrían al pasar el ratón por encima, cosa que en una
       pantalla táctil no existe: aquí se muestran ya abiertos, en cascada. */
    .nav-dropdown { position: static; width: 100%; }
    .nav-dropdown .dropdown-content,
    .nav-dropdown:hover .dropdown-content {
        display: block;
        position: static;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .dropdown-content .nav-link { padding-left: 34px; }

    /* Cada enlace, una zona de toque cómoda. */
    .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* ---------------------------------------------------------------
       3. Formularios: una sola columna
       --------------------------------------------------------------- */
    .form-row,
    .sd-row,
    .sf-row,
    .input-group,
    .sd-add-row,
    .ejercicios-filtros,
    .asist-filtros,
    .ejercicios-toolbar,
    .form-actions,
    .sd-buttons-row,
    .sf-buttons-row,
    .modal-actions,
    .gen-actions,
    .wa-actions,
    .home-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .form-field, .sd-field, .sf-field, .filter-group, .search-group, .sd-libre-campo {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    /* 16px es el mínimo: por debajo, Safari en iPhone hace zoom al enfocar el
       campo y descoloca la pantalla. */
    input, select, textarea, button {
        font-size: 16px !important;
    }
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
        min-height: 44px;
        padding: 10px 12px;
    }
    textarea { min-height: 88px; }

    /* Los botones de una fila de acciones ocupan el ancho; los de icono no
       (se tratan más abajo). */
    .form-actions button,
    .sd-buttons-row button,
    .sf-buttons-row button,
    .modal-actions button,
    .gen-actions button,
    .wa-actions button,
    .home-actions button,
    .home-actions a,
    button[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    /* ---------------------------------------------------------------
       4. Zonas táctiles: 44x44 como mínimo
       --------------------------------------------------------------- */
    button, [role="button"], input[type="submit"], input[type="button"] {
        min-height: 44px;
    }

    /* Iconos de acción: el dibujo se queda pequeño, lo que crece es el área
       pulsable, con padding. Hoy son casi imposibles de acertar con el dedo. */
    .ejercicio-icon-btn,
    .icon-btn,
    .btn-fav,
    .btn-select,
    .btn-lupa,
    .btn-edit,
    .btn-delete,
    .btn-plus,
    .btn-add-tarea,
    .close-button,
    .sd-tarea-del,
    .sd-tarea-mover,
    .search-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    /* Estos van en fila dentro de una tarjeta: que no se estiren al 100%. */
    .club-actions, .equipo-actions, .conv-actions, .norma-actions,
    .ev-actions, .ej-header-actions, .cal-session-actions, .sd-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .club-actions button, .equipo-actions button, .conv-actions button,
    .norma-actions button, .ev-actions button, .ej-header-actions button,
    .cal-session-actions button, .sd-actions button {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Las flechas de ordenar tareas van pegadas: un poco de aire entre ellas. */
    .sd-tarea-mover + .sd-tarea-mover { margin-left: 2px; }

    /* ---------------------------------------------------------------
       5. Retoques de la cuadrícula de tarjetas (ejercicios)
       --------------------------------------------------------------- */
    .ejercicios-grid { grid-template-columns: 1fr !important; }
    .ejercicios-header, .ejercicios-toolbar { align-items: stretch; }
    .ejercicios-paginacion { justify-content: center; flex-wrap: wrap; }
    .ejercicios-paginacion button { min-width: 44px; min-height: 44px; }
}