/* ==========================================================================
   MOBILE.CSS — Ajustes SOLO para pantallas pequeñas (celular / tablet)
   No modifica nada de la vista de escritorio: todas las reglas están
   dentro de @media o son "inertes" en pantallas anchas (no producen
   ningún cambio visual si el contenido ya cabe, como el overflow-x:auto).
   Aplica a: index.php, login.php, admin.php, resultados_publico.php
   ========================================================================== */

/* --------------------------------------------------------------------
   1) SEGURO GLOBAL: cualquier tabla envuelta en .table-scroll (las de
   admin.php, resultados_publico.php, index.php) ahora puede deslizarse
   horizontalmente en vez de romper el ancho de la página. En escritorio
   esto no hace nada porque las tablas ya caben.
   -------------------------------------------------------------------- */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------
   2) TABLET / CELULAR GRANDE (<= 900px)
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Evita que algún elemento suelto empuje la página hacia los lados */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------
   3) CELULAR (<= 600px)
   -------------------------------------------------------------------- */
@media (max-width: 600px) {

    /* Evita el "zoom automático" molesto de iPhone al tocar un campo
       de texto (pasa cuando el font-size es menor a 16px). Solo aplica
       a los inputs que NO tienen ya un font-size puesto a mano en el
       HTML, para no achicar los campos pequeños de las tablas de admin
       (comentarios, resultados por partido, etc.) que están pensados
       para verse compactos. */
    input[type="text"]:not([style*="font-size"]),
    input[type="number"]:not([style*="font-size"]),
    input[type="password"]:not([style*="font-size"]),
    input[type="date"]:not([style*="font-size"]),
    input[type="datetime-local"]:not([style*="font-size"]),
    select:not([style*="font-size"]),
    textarea:not([style*="font-size"]) {
        font-size: 16px;
    }

    /* Login: menos margen arriba, se usa mejor la pantalla */
    .login-shell {
        margin: 32px auto;
        padding: 26px 20px;
        width: calc(100% - 32px);
    }

    /* Encabezados de admin: menos padding lateral */
    .admin-shell {
        padding: 0 10px;
    }
    .admin-shell .admin-header .logout-link {
        font-size: 12px;
        padding: 7px 14px;
    }

    /* Botones de admin un poco más compactos para que quepan varios por fila */
    .admin-shell button,
    .admin-shell .btn {
        padding: 9px 14px !important;
        font-size: 13px !important;
    }

    /* Título principal un poco más contenido */
    .titulo-quiniela {
        gap: 10px;
        margin-bottom: 18px;
    }
    .logo-quiniela {
        width: 84px;
    }
}

/* --------------------------------------------------------------------
   4) CELULAR CHICO (<= 480px)
   -------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Modal "Nueva jornada" de admin.php tenía min-width:400px fijo en
       el HTML, lo que provocaba scroll horizontal en celulares angostos
       (320-390px). Lo forzamos a ocupar el ancho disponible. */
    #modalNuevaJornada > div {
        min-width: 0 !important;
        width: 88% !important;
        max-width: 360px !important;
        padding: 22px 18px !important;
    }

    /* Formularios de admin que usan "grid-template-columns: 1fr 1fr"
       o "1fr auto" en línea (precio/participantes, fecha/jornada,
       cantidad de códigos, código maestro, etc.): se apilan en una sola
       columna para que los campos no queden apretados. */
    .admin-shell div[style*="grid-template-columns: 1fr 1fr"],
    .admin-shell div[style*="grid-template-columns:1fr 1fr"],
    .admin-shell div[style*="grid-template-columns: 1fr auto"],
    .admin-shell div[style*="grid-template-columns:1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* Contenedores de formularios con max-width fijo inline (600/900px):
       ya se adaptan solos porque no tienen width fijo, solo confirmamos
       que no dejen padding de sobra */
    .admin-shell [style*="max-width: 600px"],
    .admin-shell [style*="max-width:600px"] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .admin-shell .tabs {
        gap: 6px;
    }
    .admin-shell .tab-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    .admin-shell .tab-content {
        padding: 16px 10px;
    }

    /* Tabla publica de resultados: aun mas compacta */
    .tabla-quiniela-publica th.pred-publica.quiniela-header {
        height: 100px;
    }
    .tabla-quiniela-publica th.pred-publica.quiniela-header > span {
        font-size: 10px;
    }
    .tabla-quiniela-publica th.nombre-publica,
    .tabla-quiniela-publica td.nombre-publica {
        min-width: 110px;
        max-width: 150px;
        width: 130px;
        font-size: 12px;
    }

    /* Casilla de resultado real (L/E/V): en celular la columna se hace muy
       angosta y la letra (que en computadora se ve bien) ya no cabia. */
    .tabla-quiniela-publica th.pred-publica,
    .tabla-quiniela-publica td.pred-publica {
        width: 24px;
        min-width: 22px;
        max-width: 28px;
        padding: 4px 1px;
    }
    .tabla-quiniela-publica input[readonly] {
        font-size: 14px;
        padding: 3px 0;
    }
}

/* --------------------------------------------------------------------
   5) CELULAR MUY CHICO (<= 380px) — iPhone SE y similares
   -------------------------------------------------------------------- */
@media (max-width: 380px) {
    .titulo-texto h1 {
        font-size: 1.4rem;
    }
    .codigo-container {
        padding: 20px 14px !important;
    }
    .codigo-input {
        font-size: 17px;
        letter-spacing: 0.16em;
    }
    #resultado {
        font-size: 15px;
        letter-spacing: 0.06em;
        padding: 10px 12px;
    }
    .quiniela-container th,
    .quiniela-container td {
        padding: 8px 4px;
        font-size: 11px;
    }
}

/* ==========================================================================
   6) MENÚ DESPLEGABLE MÓVIL — Panel de administración (admin.php)
   Botón "☰ Secciones" + cajón lateral que reemplazan la fila de pestañas
   SOLO en celular. En computadora estos elementos quedan ocultos siempre
   y las pestañas de arriba se ven exactamente igual que antes.
   ========================================================================== */
.menu-movil-btn,
.menu-movil-overlay,
.menu-movil-drawer {
    display: none;
}

@media (max-width: 600px) {

    /* Oculta la fila de pestañas original y muestra el botón hamburguesa */
    .admin-shell .tabs {
        display: none;
    }

    .menu-movil-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: max-content;
        margin: 0 auto 16px;
        padding: 10px 18px;
        border: none;
        border-radius: 999px;
        background: var(--ink);
        color: #fff;
        font-family: var(--font);
        font-weight: 700;
        font-size: 14px;
        cursor: pointer;
        box-shadow: var(--shadow);
    }
    .menu-movil-icon {
        font-size: 16px;
        line-height: 1;
    }

    /* Fondo oscuro detrás del cajón */
    .menu-movil-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .menu-movil-overlay.abierto {
        opacity: 1;
        pointer-events: auto;
    }

    /* Cajón lateral con las secciones */
    .menu-movil-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 78%;
        max-width: 280px;
        background: var(--surface, #fff);
        z-index: 999;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        padding: 18px 16px;
        overflow-y: auto;
    }
    .menu-movil-drawer.abierto {
        transform: translateX(0);
    }

    .menu-movil-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
        font-family: var(--display);
        font-weight: 800;
        color: var(--ink);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .menu-movil-cerrar {
        border: none;
        background: transparent;
        font-size: 18px;
        color: var(--muted);
        cursor: pointer;
        padding: 4px 8px;
        line-height: 1;
    }

    .menu-movil-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .menu-movil-links a.tab-link {
        display: block;
        width: auto;
        text-align: left;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ==========================================================================
   7) TABLA "RESULTADOS" DEL ADMIN — nombres de equipos rotados desfasados
   El encabezado rotado (ej. "Necaxa vs Atlante") usaba una posición fija
   en px (top/left) calculada solo para el tamaño de escritorio. Al achicar
   la celda en celular, el texto quedaba desfasado hacia abajo/izquierda.
   Aquí lo centramos con una técnica que se adapta a cualquier tamaño,
   igual que ya se hace en la tabla pública de resultados.
   ========================================================================== */
@media (max-width: 900px) {
    .admin-shell .quiniela-header {
        position: relative !important;
    }
    .admin-shell .quiniela-header > span {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) rotate(-90deg) !important;
        transform-origin: center center !important;
    }
}

/* ==========================================================================
   8) TABLA "CÓDIGOS DE ACCESO" DEL ADMIN — se salía de la pantalla en celular
   Esta tabla se genera por JavaScript dentro de #listaCodigos y no estaba
   envuelta en ningún contenedor con scroll (a diferencia de las demás
   tablas del panel, que sí usan .table-scroll). Con más columnas (Estado,
   Fecha Creación, Fecha Uso, Usado Por, Comentario, Acciones) no cabía en
   pantallas angostas. Se soluciona permitiendo que solo esta tabla se
   deslice de lado en celular, sin achicar ni reacomodar sus columnas.
   En computadora no cambia nada porque la tabla ya cabe sin necesidad
   de scroll.
   ========================================================================== */
@media (max-width: 900px) {
    #listaCodigos {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #listaCodigos table {
        min-width: 680px;
    }
}