mida 411px dentro de una pantalla de 393. Entonces los 20px de margen derecho se salen de la pantalla, sólo se ven los de la izquierda, y toda la columna se ve corrida. Es el mismo bicho que `1fr` contra `minmax(0,1fr)`. */ .ancho { max-width: 460px; margin: 0 auto; padding: var(--pad); min-width: 0; } /* Las barras cruzan la ventana completa —el cristal se ve de borde a borde— y lo que se limita a 460 es su CONTENIDO, centrado. Ponerle el ancho a la barra la dejaba pegada a la izquierda. */ .barra { gap: 0; } .barra__interior { width: 100%; max-width: 460px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative; min-height: 30px; } .destinos__interior { width: 100%; max-width: 460px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center; } /* ── La regla que evita que la app se vea corrida ──────────────────── Un grid sin plantilla usa columnas `auto`, que es minmax(min-content, max-content): la columna SE NIEGA a encoger por debajo de su contenido. Un solo renglón ancho —una fila del libro, una cifra larga— hace que el grid mida más que la pantalla, ese ancho sube por todos los padres hasta

, y entonces el margen derecho se sale de la vista mientras el izquierdo se queda: la columna entera se ve chueca sin que nada parezca estar mal. Con minmax(0, 1fr) la columna puede encoger y el ancho deja de propagarse. */ /* .tiles queda fuera a propósito: es de DOS columnas y este selector le gana por especificidad, así que incluirla apilaba "Entró" sobre "Salió". */ .pila, .pila-16, .campo, .campos-2, .sugerencias, .sugerencia, .feed, .feed > div:has(> .tarjeta):not(.tiles), .tile, .consumo, .semaforo, .art__cuerpo, .modos, .dialogo__datos, .dialogo__botones, .sectores, .proximo, .lista { grid-template-columns: minmax(0, 1fr); } /* Y ninguna caja de la app puede imponer su ancho hacia arriba. */ .lista, .tarjeta, .feed, main.ancho { min-width: 0; } .pila { display: grid; gap: 12px; } .pila-16 { display: grid; gap: 16px; } .fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .bloque { padding: 22px 20px 24px; } @media (min-width: 600px) { .bloque { padding: 26px 26px 28px; } } .tit-seccion { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .tit-seccion__ico { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--indigo-suave); } .tit-seccion__ico svg { width: 17px; height: 17px; stroke: var(--indigo); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .tit-seccion h3 { font-size: 17px; } /* ── Campos ──────────────────────────────────────────────────────── */ .campo { display: grid; gap: 7px; } .campo > label { font-size: 13px; font-weight: 560; color: var(--ink-2); } .campo input, .campo select, .campo textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--gline); border-radius: 15px; padding: 14px 16px; font-size: 16px; /* 16px o iOS hace zoom al enfocar */ box-shadow: inset 0 1px 2px rgba(20,20,50,.03); transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A8DA3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-suave); } .campo input::placeholder { color: var(--ink-3); } .campos-2 { display: grid; gap: 14px; } @media (min-width: 520px) { .campos-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ── Botones ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 560; letter-spacing: -0.015em; padding: 15px 24px; border-radius: 980px; border: none; cursor: pointer; background: var(--indigo); color: #fff; box-shadow: var(--glow-indigo); transition: transform .18s cubic-bezier(.3,.8,.4,1), box-shadow .22s ease, opacity .18s ease; } .btn:hover { box-shadow: 0 10px 30px rgba(76,70,208,.36); } .btn:active { transform: scale(.975); } .btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; } .btn--bloque { width: 100%; } /* .btn está pensado para