/* ============================================================
   DESKTOP-VIEW FORZADO — Hace que móvil se vea igual que PC
   Estrategia:
   1. El <meta viewport width=1200> hace que el navegador móvil
      use un layout viewport de 1200px (igual que PC) y lo escala.
   2. Este CSS pone un ancho mínimo de 1200px y bloquea todos
      los re-apilamientos responsive de Bootstrap para que, aunque
      algún navegador ignore el viewport, el diseño siga siendo PC.
   ============================================================ */

html {
    min-width: 1200px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Solo la página del editor (index) se fija a 1200px.
   Las demás páginas conservan su ancho propio de PC (800/900/1400)
   y el viewport width=1200 ya las muestra idénticas en móvil. */
body:has(.container-dev) {
    min-width: 1200px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: auto !important;
}

/* Contenedor del editor: nunca estrecharse como en móvil */
.container-dev {
    min-width: 1180px !important;
    max-width: 1200px !important;
}

/* ===== Bootstrap grid: forzar columnas de escritorio ===== */
/* NOTA: el orden importa. Las reglas lg van DESPUÉS porque tienen
   prioridad en escritorio cuando un elemento tiene ambas clases
   (ej. desafíos: col-md-6 col-lg-4 -> 3 por fila). */
/* col-md-* (formularios lado a lado) */
.col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}
.col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}
.col-md-4 {
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    width: 33.33333333% !important;
}
/* col-lg-* (layout principal 8/4 y desafíos) */
.col-lg-8 {
    flex: 0 0 66.66666667% !important;
    max-width: 66.66666667% !important;
    width: 66.66666667% !important;
}
.col-lg-4 {
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    width: 33.33333333% !important;
}
.col-lg-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}
/* Las filas nunca apilan: mantienen layout horizontal de PC */
.row {
    flex-wrap: wrap !important;
}
/* Evita que .row > * se pongan al 100% por media queries */
.row > [class*="col-"] {
    flex-shrink: 0;
}

/* ===== Pestañas (tabs): responsive como antes ===== */
/* Base: comportamiento original de Bootstrap (wrap). En PC caben en
   una fila igual que siempre, así que no cambia nada en escritorio. */
.nav-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}
.nav-tabs .nav-item {
    flex: 0 1 auto !important;
    white-space: normal !important;
}
.nav-tabs .nav-link {
    white-space: normal !important;
}

/* En móvil/táctil: tabs grandes y en varias filas (como el responsive
   original), aunque el resto de la página siga en modo PC de 1200px.
   Se usa pointer:coarse porque el viewport fijo impide usar @media por ancho. */
@media (pointer: coarse) {
    /* 4 por fila = 2 filas exactas, sin huecos ni espacios sobrantes */
    #mainTabs {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }
    #mainTabs .nav-item {
        min-width: 0 !important;
        margin: 0 !important;
    }
    #mainTabs .nav-link {
        justify-content: center;
        text-align: center;
        font-size: 0.9rem !important;
        padding: 10px 6px !important;
        height: 100%;
        line-height: 1.2;
    }
    /* Sub-pestañas de zombies también táctiles */
    #zombiesTabs .nav-link {
        padding: 12px 10px !important;
        font-size: 0.9rem !important;
    }
}

/* ===== Header superior (logo Pvz2 Level Editor): sin scroll ===== */
/* Se restaura el comportamiento original: nada de nowrap ni scroll
   horizontal en la barra del logo/botones. */
.d-flex.justify-content-between {
    flex-wrap: wrap !important;
    overflow: visible !important;
}
.d-flex.gap-2 {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

/* ===== Galería de niveles: 4 por fila como en PC ===== */
/* (sin esto, el forzado de .col-lg-4 la dejaba en 3) */
#galleryGrid > .col-xl-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}

/* ===== Minijuegos: 3 columnas siempre (como PC) ===== */
.minigames-masonry {
    column-count: 3 !important;
}

/* ===== Footer: 3 columnas fijas como en PC ===== */
.footer-content {
    grid-template-columns: repeat(3, 1fr) !important;
}
.footer-bottom {
    flex-wrap: nowrap !important;
}

/* ===== Grids de contenido: igual que PC ===== */
.zombie-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
}
.plants-grid,
.collectables-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
}
#visualEffectGrid {
    grid-template-columns: repeat(3, 1fr) !important;
}
.mower-grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
}
.elements-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
}
.element-type-cards {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ===== Tablero: NO tocar tamaños (los calcula el JS por escenario) ===== */
/* Las celdas se alinean con el fondo según --cell-size / --cell-gap.
   Cualquier min-width fijo las descuadra, así que aquí no se fuerza nada. */

/* ===== Modales: mismo tamaño que en PC ===== */
.lawn-dialog,
.element-selection-dialog,
.reward-container-modal,
.conveyor-modal,
.custom-modal-lg {
    min-width: 500px;
}
.modal-dialog {
    max-width: 650px !important;
    min-width: 500px !important;
}

/* ===== Tablas: scroll horizontal en vez de reordenar ===== */
/* OJO: se excluye .board-table, su ancho lo calcula el JS por escenario */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.table-responsive table:not(.board-table) {
    min-width: 900px;
}

/* ===== Formularios lado a lado (Fila 2, 3, 4...) ===== */
.form-row {
    grid-template-columns: 1fr 1fr !important;
}
.action-buttons-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ===== Notificaciones: posición PC ===== */
.notification-container {
    max-width: 400px !important;
    right: 20px !important;
    left: auto !important;
}
.toast-notification {
    min-width: 300px !important;
}