/*!
 * ERA GAMER — Mobile Fix Armador
 *
 * Bug observado en celular: filas de componentes (.era-comp-row) se expanden
 * fuera del viewport por contenido largo (nombres de productos). El grid
 * "50px 1fr 32px" no truncaba el texto porque los grid items tienen
 * min-width: auto (= min-content) por defecto.
 *
 * Fix: forzar min-width:0 en grid items para que text-overflow: ellipsis
 * pueda activarse correctamente.
 */

/* ============================================================
   FIX PRINCIPAL — permite que las filas se achiquen y el texto trunque
   ============================================================ */
.era-gamer-tool .era-comp-row > * {
    min-width: 0;
}

.era-gamer-tool .era-picker-btn {
    min-width: 0;
    max-width: 100%;
}

.era-gamer-tool .era-picker-text {
    min-width: 0;
}

/* ============================================================
   DEFENSIVO — prevenir overflow horizontal a nivel de pagina
   ============================================================ */
.era-gamer-tool {
    max-width: 100%;
    overflow-x: hidden;
}

.era-gamer-tool .era-main,
.era-gamer-tool .era-col-left,
.era-gamer-tool .era-col-right,
.era-gamer-tool .era-comp-grid {
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   Refuerzo solo en pantallas pequeñas (no afecta desktop)
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
    .era-gamer-tool .era-comp-row {
        width: 100%;
        max-width: 100%;
    }
}