/* ═══════════════════════════════════════════════════════════════
   mobile.css — CAPA MOBILE (solo la carga mobile.html)
   Estilo elegido: COMPACTO Y FUNCIONAL · hero chico · planes 2 por fila
   · cotización en barra fija abajo. La compu (styles.css) no se toca.
═══════════════════════════════════════════════════════════════ */

/* ── Toggle a escritorio (barrita arriba) ── */
.mobile-ui .view-switch{
  display:block;text-align:center;background:#0f172a;color:#cbd5e1;
  font-size:.72rem;font-weight:600;padding:6px 10px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-ui .view-switch:active{background:#1e293b}

/* ── Header compacto: 2 filas ordenadas ──
   Fila 1:  logo .......... [tema] [Admin]
   Fila 2:  mercado (AR/UY/INT) + idioma (ES/EN), a lo ancho.
   Antes los 4 controles iban en una sola fila y el botón Admin se
   cortaba/desbordaba en pantallas angostas (≤360px). */
.mobile-ui header{
  height:auto;min-height:60px;          /* el base fija 60px y la 2da fila se salía del recuadro */
  padding:8px 12px;flex-wrap:wrap;align-items:center;gap:8px}
.mobile-ui .header-tag{display:none}
/* header-right deja de ser una caja propia: sus hijos entran al flex
   del <header> para poder ordenarlos en dos filas sin tocar el HTML */
.mobile-ui .header-right{display:contents}
.mobile-ui .logo{order:1;margin-right:auto}
.mobile-ui .theme-toggle-btn{order:2;flex:0 0 auto}
.mobile-ui .header-right > button[onclick*="openEditorModal"]{
  order:3;flex:0 0 auto;padding:6px 12px}
.mobile-ui .market-lang-wrap{
  order:4;flex:0 0 100%;justify-content:flex-start;gap:8px;margin:0}

/* ── HERO chico: solo un título breve ── */
.mobile-ui .hero{padding:16px 14px 10px}
.mobile-ui .hero-logo-wrap:empty{display:none}
.mobile-ui .hero h1{font-size:1.35rem;line-height:1.15;margin:0}
.mobile-ui .hero-subtitle,
.mobile-ui .hero-badges{display:none}      /* fuera subtítulo y chips en el celu */

/* ── Layout general compacto ── */
.mobile-ui .container{padding:12px;gap:12px}

/* ── PLANES POR RUBRO: 2 por fila, compactos ── */
.mobile-ui .presets-card{padding:12px}
.mobile-ui .presets-head h2{font-size:.92rem}
.mobile-ui .presets-head p{font-size:.75rem;margin-top:1px}
.mobile-ui .presets-row{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mobile-ui .preset-card{
  min-height:0;padding:10px;gap:2px;border-radius:10px}
.mobile-ui .preset-icon{font-size:1.25rem}
.mobile-ui .preset-name{font-size:.8rem;line-height:1.15}
.mobile-ui .preset-desc{font-size:.68rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mobile-ui .preset-price{font-size:.95rem;margin-top:0}
.mobile-ui .preset-count{font-size:.62rem;padding:1px 6px}
/* Cards a altura de contenido (sin huecos) + lista de módulos compacta */
.mobile-ui .presets-row{align-items:start}
.mobile-ui .preset-desc{flex:none}
.mobile-ui .preset-mods{font-size:.58rem;line-height:1.35;margin-top:6px;padding-top:5px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ── LISTA DE MÓDULOS compacta pero tocable ── */
.mobile-ui .modules-card-head{padding:10px 12px}
.mobile-ui .modules-card-head h2{font-size:.95rem}
.mobile-ui .modules-card-head-actions{width:100%;gap:6px}
.mobile-ui .search-wrap{flex:1 1 100%}
.mobile-ui .search-wrap input{width:100%;font-size:16px}  /* 16px = sin zoom iOS */
.mobile-ui .mod-head{padding:11px 12px;gap:9px;min-height:46px}
.mobile-ui .mod-check{width:20px;height:20px}
.mobile-ui .mod-name{font-size:.9rem}
.mobile-ui .mod-icon{font-size:1.05rem}
.mobile-ui .mod-price{font-size:.85rem;font-weight:700}
/* Ocultar el asa de arrastrar (drag) en celu, no sirve al tacto */
.mobile-ui .drag-handle{display:none}

/* ── COTIZACIÓN: la tarjeta grande NO se muestra en el celu ──
   El total va en la barra fija de abajo y el detalle en el drawer. */
.mobile-ui .price-card{display:none}

/* ── BARRA FIJA ABAJO (total siempre visible) ── */
.mobile-ui .mobile-cta-bar{padding:9px 14px;gap:12px}
.mobile-ui .mobile-summary{font-size:.9rem;color:var(--text)}
.mobile-ui .mobile-cta-open-btn{padding:13px 18px;font-size:.95rem;border-radius:11px}
.mobile-ui body,.mobile-ui{--_bar:70px}

/* ── DRAWER de cotización más cómodo ── */
.mobile-ui .mobile-drawer{padding:14px 16px 26px}
.mobile-ui .mobile-drawer .cta-btn{padding:15px;font-size:1rem;border-radius:12px}

/* ── Modales/overlays a pantalla completa ── */
.mobile-ui .modal{max-width:100%!important;width:100%;border-radius:16px 16px 0 0}