/* =============================================================================
 * responsive.css — Capa responsive tablet / móvil (USO HORIZONTAL)
 * F2R Engineering
 *
 * OBJETIVO
 *   Adaptar el HMI (login, producción y panel Sistema) a tablets y teléfonos
 *   sostenidos EN HORIZONTAL. El diseño base es de escritorio; esta hoja sólo
 *   añade reglas dentro de @media, así que en escritorio NO cambia nada.
 *
 * GATING POR DISPOSITIVO TÁCTIL (importante)
 *   TODAS las reglas exigen `(pointer: coarse)` → sólo se aplican en pantallas
 *   táctiles (tablets/teléfonos). Un PC/portátil con ratón o trackpad usa
 *   SIEMPRE el layout de escritorio, AUNQUE su ventana sea estrecha (<1180px)
 *   por escalado de Windows (125/150%), zoom del navegador o monitor pequeño.
 *   Sin este gating, un portátil escalado entraba en "modo tablet" por error.
 *   (El emulador de dispositivos de Chrome reporta pointer:coarse → testea OK.)
 *
 * REGLA DE CARGA
 *   Debe enlazarse SIEMPRE LA ÚLTIMA (después de variables.css, components.css,
 *   header.css, production.css, system.css, etc.). Al tener igual especificidad
 *   que el CSS base, gana por orden de cascada.
 *
 * BREAKPOINTS (todos exigen pointer:coarse; todos en horizontal salvo el bloque 0)
 *   · Tablet horizontal  → (pointer: coarse) and (max-width: 1180px)
 *       iPad 1024×768, iPad Air 1180×820… visor + sidebar lado a lado.
 *   · Móvil horizontal    → (pointer: coarse) and (max-height: 500px)
 *       teléfonos tumbados (~740×360, ~844×390): altura crítica → header y
 *       popups comprimidos.
 *   · Ancho muy justo     → (pointer: coarse) and (max-width: 900px)
 *       apila rejillas internas de popups/sistema.
 *
 * Usa exclusivamente tokens de variables.css (--space-*, --fs-*, --font-scale).
 * ============================================================================= */


/* =============================================================================
 * 0. BLOQUEO DE ORIENTACIÓN  ──  "Gira el dispositivo"
 *
 * El HMI sólo es usable en horizontal. En dispositivos TÁCTILES sostenidos en
 * vertical mostramos un overlay a pantalla completa pidiendo girar el equipo.
 * Gating: (orientation: portrait) AND (pointer: coarse) → sólo táctiles; nunca
 * en un monitor de escritorio en vertical (puntero fino).
 * El nodo #orientation-lock lo inyecta app.js en TODAS las páginas.
 * ============================================================================= */
#orientation-lock { display: none; }

/* max-width:1024 → sólo tablets/teléfonos en vertical (iPad vertical llega a
 * 1024). Un panel táctil grande en vertical (raro) no dispara el aviso. */
@media screen and (orientation: portrait) and (pointer: coarse) and (max-width: 1024px) {
  #orientation-lock {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100000;                 /* por encima de todo: toast=3000, modal=2000 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: max(var(--space-6), env(safe-area-inset-top))
             var(--space-6)
             max(var(--space-6), env(safe-area-inset-bottom));
    text-align: center;
    background: var(--surface-base);
    color: var(--text-primary);
  }
  /* Congelar el contenido de fondo mientras el aviso está visible. */
  body { overflow: hidden !important; }
}

#orientation-lock .ol-phone {
  width: 72px;
  height: 72px;
  color: var(--accent);
  animation: ol-rotate-hint 2.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
#orientation-lock .ol-phone svg { width: 100%; height: 100%; }

#orientation-lock .ol-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
}
#orientation-lock .ol-hint {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  max-width: 34ch;
  line-height: var(--lh-base);
}

@keyframes ol-rotate-hint {
  0%, 25%   { transform: rotate(0deg); }
  55%, 80%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}


/* =============================================================================
 * 1. OBJETIVOS TÁCTILES  ──  cualquier pantalla táctil (independiente de tamaño)
 *
 * Los botones de icono del diseño base son de 30–36px, por debajo del mínimo
 * recomendado para el dedo (~40px). Sólo afecta a dispositivos con puntero
 * grueso y tamaño tablet/móvil → ni el escritorio con ratón ni un panel táctil
 * grande (kiosko 1920×1080) existente cambian.
 * ============================================================================= */
@media (pointer: coarse) and (max-width: 1180px) {
  .modern-btn { min-height: 40px; }
  .btn-close  { width: 40px; height: 40px; }
  .btn-icon   { width: 40px; height: 40px; }
  /* Botones de cierre de los popups (mismo patrón, distintas clases). */
  .prm-popup-close,
  .spp-popup-close,
  .cnt-popup-close,
  .aph-popup-close,
  .sys-overlay-closebtn { min-width: 40px; min-height: 40px; }
}

/* =============================================================================
 * 1b. BOTÓN DE PANTALLA COMPLETA
 *
 * En el navegador móvil la barra de URL roba altura (crítica en horizontal).
 * Este botón pone Chrome en modo inmersivo (oculta la barra) y bloquea
 * horizontal. Sólo aparece en táctil tablet/móvil → ni el escritorio ni el
 * kiosko grande lo ven. Lógica en app.toggleFullscreen().
 * ============================================================================= */
.btn-fullscreen { display: none; }
@media (pointer: coarse) and (max-width: 1180px) {
  .btn-fullscreen { display: inline-flex; align-items: center; justify-content: center; }
}


/* =============================================================================
 * 2. HEADER COMPACTO  ──  horizontal con poca altura (teléfonos tumbados)
 *
 * En un teléfono horizontal la altura (~360px) es el recurso escaso. El header
 * base ocupa ~96px (banner 26 + barra 70). Lo reducimos a ~70px y achicamos
 * textos/separadores para devolver espacio al visor.
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .alarm-banner {
    height: auto;
    min-height: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .header-bar { height: 54px; }
  .power-zone,
  .logo-zone { padding: 0 var(--space-2); }
  .machine-indicator { width: 40px; height: 40px; }
  .machine-indicator .icon-power,
  .machine-indicator .icon-fault { width: 26px; height: 26px; }
  /* El logo lleva height:45px inline → necesita !important para ganarle.
     max-width + object-fit: contain lo acotan para que NO sobresalga por la
     derecha en pantallas estrechas (mantiene proporción, sin deformar). */
  .logo { height: 24px !important; max-width: 84px; object-fit: contain; }

  .data-zone { gap: var(--space-2); }
  .hmi-data-grid { gap: var(--space-2); }
  /* Resumen de estados: chips PEQUEÑOS apilados en vertical y CONTENIDOS dentro
     de la barra (alto fijo) → no se salen por encima del banner de alarmas ni
     por abajo. Con 3 estados caben apilados; si hubiera más, scroll vertical
     con la barra de scroll oculta. */
  .hmi-summary-row {
    flex-wrap: wrap;
    align-content: center;
    gap: 3px;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .hmi-summary-row::-webkit-scrollbar { display: none; }
  .hmi-summary-chip {
    padding: 0 5px;
    gap: 3px;
    font-size: calc(9px * var(--font-scale));
    line-height: 1.45;
  }
  .hmi-summary-dot { width: 6px; height: 6px; }
  .hmi-summary-count { font-size: calc(9px * var(--font-scale)); }
  /* Separador usuario/fecha: pequeño y tenue en vez de oculto — antes, al
     ocultar el ">|", el nombre de usuario y el título "DATA:" se solapaban. */
  .hmi-sep { font-size: calc(10px * var(--font-scale)); opacity: 0.4; padding: 0 3px; }
  /* Usuario/fecha miden su contenido (min-width:auto) → el valor del usuario ya
     NO se desborda sobre el ">|". El que encoge/scrollea es el resumen. La
     columna de fecha (último .hmi-col) sí puede encoger y se oculta en estrecho
     (ver bloque max-width:820). */
  .hmi-col { min-width: auto !important; }
  .hmi-data-grid > .hmi-col-stretch { min-width: 0 !important; }
  .hmi-lbl { font-size: calc(10px * var(--font-scale)); }
  .hmi-val { font-size: calc(13px * var(--font-scale)); }

  .header-substation { gap: var(--space-2); }
  .header-substation-grid { gap: var(--space-2) var(--space-3); }
}

/* Cuando el ancho es justo (≤820), oculta la fecha (no esencial en planta): así
 * el resumen + usuario + controles + logo caben sin desbordar por la derecha.
 * Subimos el umbral de 720 a 820 porque con la fecha (~150px) el header se
 * salía de pantalla en móviles tumbados. Por encima de 820 sí cabe la fecha. */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 820px) {
  .hmi-data-grid > .hmi-col:last-child { display: none; }
  .hmi-data-grid > .hmi-sep:last-of-type { display: none; }
}


/* =============================================================================
 * 3. PRODUCCIÓN  ──  visor 3D + sidebar SIEMPRE lado a lado en horizontal
 *
 * El CSS base, en `@media (max-width:900px)`, APILA el layout en vertical
 * (visor arriba, sidebar abajo). En horizontal eso es contraproducente (la
 * altura es escasa): forzamos de nuevo fila y estrechamos la sidebar.
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  .prod-layout { flex-direction: row !important; }
  .prod-viewer {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  /* Sidebar estrecha y proporcional al ancho; nunca se come el visor.
   * Cubre también el estado .is-docked (el botón de plegar queda oculto en
   * táctil, así que neutralizamos el plegado para no dejar al operador sin
   * sidebar y sin forma de recuperarla). */
  .prod-sidebar,
  .prod-sidebar.is-docked {
    width: clamp(280px, 38vw, 440px) !important;
    min-width: 280px !important;
    max-width: 48vw !important;
    border-left: 1px solid var(--border-base) !important;
    border-top: none !important;
    overflow: visible;
    cursor: auto;
  }
  .prod-sidebar.is-docked > .prod-sidebar-body { display: flex !important; }
  .prod-sidebar-body { padding: var(--space-2); gap: var(--space-2); }

  /* El asa de redimensionado y el botón de plegar son diminutos para el dedo
   * y dejan de tener sentido en este layout fijo: ocultos. */
  .prod-sidebar-resize,
  .prod-sidebar-dock { display: none !important; }

  /* Lista de dispositivos: altura relativa al viewport, no fija a 320px. */
  .prod-devices-list { max-height: clamp(160px, 34vh, 320px); }
}

/* Móvil horizontal: aún más compacto dentro de la sidebar. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .prod-oee-donut { width: 110px; height: 110px; }
  .prod-devices-list { max-height: clamp(120px, 40vh, 240px); }
  /* Las barras flotantes del visor (secuencias / leyenda) no deben taparlo
   * entero ni salirse por arriba en pantallas muy bajas. */
  .prod-seq-bar { bottom: var(--space-2); max-height: 46vh; overflow-y: auto; }
  .prod-legend  { bottom: calc(var(--space-2) + 84px); max-height: 50vh; overflow-y: auto; }
}


/* =============================================================================
 * 3b. CONTROLES DEL VISOR → PANEL LATERAL  (mobile-layout.js)
 *
 * En táctil pequeño, mobile-layout.js mueve la barra de secuencias, la leyenda
 * y los banners de estado dentro del sidebar (host #prod-mobile-controls) para
 * dejar el visor 3D limpio. Aquí los pasamos de overlay flotante (absolute +
 * blur + sombra) a secciones normales en columna dentro del panel.
 *
 * El gate (coarse Y (ancho<=1180 Ó alto<=600)) DEBE coincidir con el de
 * mobile-layout.js. Si el script no llega a moverlos (fallo de carga), los
 * elementos siguen en el visor con los ajustes del bloque 2 como fallback.
 * ============================================================================= */
@media (pointer: coarse) and (max-width: 1180px),
       (pointer: coarse) and (max-height: 600px) {
  .prod-mobile-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }
  .prod-mobile-controls:empty { display: none; }
  /* Con un faceplate de dispositivo acoplado, el sidebar muestra solo ese
   * faceplate: ocultamos los controles reubicados para no estorbar. */
  .prod-sidebar.has-docked-popup .prod-mobile-controls { display: none; }

  /* Reset común: de overlay flotante a bloque en flujo, ancho completo. */
  .prod-mobile-controls > #HEAD_STATION_BANNERS,
  .prod-mobile-controls > #prod-seq-bar,
  .prod-mobile-controls > #prod-legend {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  /* Banners de estado MSG/ALM: filas a ancho completo. */
  .prod-mobile-controls > #HEAD_STATION_BANNERS { pointer-events: auto; gap: var(--space-1); }
  .prod-mobile-controls .station-banner { width: 100%; }

  /* Barra de secuencias: grupos apilados en columna (ya no es una barra que
   * flota y se envuelve en 3 filas sobre el visor). */
  .prod-mobile-controls > #prod-seq-bar {
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-overlay);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    gap: var(--space-2);
  }
  /* Separadores verticales entre grupos: no tienen sentido apilados. */
  .prod-mobile-controls .prod-seq-group + .prod-seq-group::before { display: none; }

  /* Leyenda: panel normal; el texto era blanco sobre fondo translúcido oscuro,
   * lo adaptamos al tema del panel. */
  .prod-mobile-controls > #prod-legend {
    background: var(--surface-overlay);
    border: 1px solid var(--border-base);
    color: var(--text-primary);
  }
}


/* =============================================================================
 * 4. FACEPLATES / DIÁLOGOS / FILAS DE PARÁMETROS
 *
 * El faceplate base mide min(620px,92vw) y sus filas tienen una etiqueta fija
 * de 200px. Acoplado a una sidebar de ~280–440px se rompe: lo hacemos fluido
 * y apilamos etiqueta sobre control.
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  /* Faceplate acoplado a la sidebar de producción → ocupa el ancho real. */
  .prod-sidebar-body .faceplate {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-3);
  }
  /* Dentro de la sidebar nunca hay ancho para el layout 2-columnas: apilamos. */
  .prod-sidebar-body .field-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  .prod-sidebar-body .field-row-label { flex: none; }
  /* Animaciones de dispositivo con ancho fijo (p.ej. cilindro 240px). */
  .prod-sidebar-body .cylinder-wrapper { width: min(240px, 100%); }

  /* Rejillas internas del faceplate (tarjetas de valores e indicadores
   * booleanos). En una sidebar estrecha el grid base (3 columnas fijas en
   * servo, o ítems que no encogen) se desborda → forzamos máx. 2 columnas y
   * permitimos que las celdas se encojan con ellipsis. */
  .prod-sidebar-body .prod-fp-cards,
  .prod-sidebar-body .prod-fp-cards.is-servo-layout,
  .prod-sidebar-body .prod-fp-bools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prod-sidebar-body .prod-fp-card,
  .prod-sidebar-body .prod-fp-bool { min-width: 0; }
  .prod-sidebar-body .prod-fp-bool-lbl,
  .prod-sidebar-body .prod-fp-card-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Diálogos y faceplates a pantalla completa (no acoplados) en móvil horizontal. */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 820px) {
  .faceplate { width: min(560px, 94vw); padding: var(--space-3); }
  .dialog    { width: min(420px, 92vw); }
  .field-row { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .field-row-label { flex: none; }
}


/* =============================================================================
 * 5. POPUPS / MODALES  (parámetros, parám. estación, contadores, alarmas,
 *    estadísticas, ajustes de visor)
 *
 * Se centran con `inset` bajo el header global (~90px) + márgenes laterales de
 * 24–30px. En tablet reducimos los márgenes; en móvil horizontal subimos el
 * popup (header comprimido) y lo pegamos a los bordes para ganar superficie.
 * ============================================================================= */

/* — Tablet horizontal: menos margen lateral, misma posición vertical. — */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  .prm-popup,
  .spp-popup,
  .cnt-popup {
    inset: 90px 14px 14px 14px;
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
  }
  .aph-popup {
    inset: 90px 14px 14px 14px;
  }
  .vws-panel { width: min(300px, calc(100vw - 24px)); }
}

/* — Móvil horizontal: header ~70px → subimos el popup y apretamos al borde. — */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .prm-popup {
    inset: 62px 8px 8px 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: calc(100vh - 70px);          /* .prm-popup exige height explícito */
    max-height: calc(100vh - 70px);
  }
  .spp-popup,
  .cnt-popup {
    inset: 62px 8px 8px 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  .aph-popup {
    inset: 62px 8px 8px 8px;
    max-height: calc(100vh - 70px);
  }
}

/* — Ancho muy justo: apilar rejillas internas. — */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 900px) {
  /* Parámetros (recetas): NO apilar en una columna — al hacerlo, la sidebar
     pasaba a fila `auto` del grid y la lista (flex:1) se quedaba sin alto y
     colapsaba (no aparecía la lista de selección). Mantenemos 2 columnas con
     la sidebar más estrecha, conservando su alto completo y su scroll. */
  .prm-popup-body { grid-template-columns: minmax(120px, 40%) 1fr !important; }
  /* Contadores: una sola columna de tarjetas (son tarjetas de alto automático,
     no una lista flex, así que apilar sí es seguro aquí). */
  .cnt-popup-body { grid-template-columns: 1fr !important; }
  /* Estadísticas: navegación lateral en modo sólo-icono. */
  .stats-nav { width: 60px; }
  .stats-nav-btn { justify-content: center; }
  .stats-nav-btn-label,
  .stats-nav-btn-badge { display: none; }
}

/* Las tablas anchas de alarmas/estadísticas ya tienen overflow:auto en su
 * cuerpo (.aph-body) → en estrecho hacen scroll horizontal en vez de romper el
 * layout. Reforzamos el contenedor por si acaso. */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  .aph-body,
  .stats-content { overflow: auto; }
}


/* =============================================================================
 * 5b. ESTADÍSTICAS — barra de filtros que se auto-oculta al hacer scroll
 *
 * En móvil/tablet la barra de filtros (título + estación + rango + botones)
 * roba mucho alto y tapa el gráfico. La fijamos arriba (sticky) y la ocultamos
 * al hacer scroll hacia abajo dentro de la sección; reaparece al subir. La
 * clase .is-filters-hidden la pone statistics-popup.js según la dirección del
 * scroll. Solo táctil → en escritorio la barra se comporta como siempre.
 * ============================================================================= */
@media (pointer: coarse) and (max-width: 1180px),
       (pointer: coarse) and (max-height: 600px) {
  .stats-alarms-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface-base);          /* mismo fondo que el panel → tapa el gráfico al deslizar bajo ella */
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.45);
    transition: transform var(--transition-base), opacity var(--transition-base);
  }
  /* El título largo no aporta en móvil y suma una fila entera. */
  .stats-alarms-toolbar-title { display: none; }
  /* Oculta (desliza hacia arriba) al bajar; reaparece al subir. */
  .stats-alarms.is-filters-hidden .stats-alarms-toolbar {
    transform: translateY(-115%);
    opacity: 0;
    pointer-events: none;
  }
}


/* =============================================================================
 * 6. LOGIN
 *
 * El cuadro mide 400px fijos y el wrapper centra vertical contra un body de
 * 100vh. En móvil horizontal (~360px de alto) el cuadro no cabe centrado:
 * lo hacemos fluido y dejamos scroll desde arriba. NO se toca `body` (en
 * producción/sistema vale 100vh y romperíamos el layout a pantalla completa).
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  .unified-panel { width: min(400px, calc(100vw - 2 * var(--space-4))); }
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .login-wrapper {
    align-items: flex-start;             /* desde arriba, no centrado */
    overflow-y: auto;
    padding: var(--space-3) var(--space-3);
  }
  .panel-header { padding: var(--space-2) var(--space-4); }
  .panel-body { padding: var(--space-4); gap: var(--space-3); }
}


/* =============================================================================
 * 7. SISTEMA  (página standalone y overlay sobre el visor)
 *
 * .sys-page mide 880px máx. y usa paddings/gaps generosos. La hacemos fluida y
 * compactamos. Los grupos de toggles y la tabla de text_lists se adaptan al
 * ancho del móvil.
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1180px) {
  .sys-page {
    max-width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-6);
    gap: var(--space-4);
  }
  .sys-card { padding: var(--space-4); }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  .sys-page { padding: var(--space-3); gap: var(--space-3); }
  .sys-card { padding: var(--space-3); }
  .sys-page-title { font-size: var(--fs-lg); }
  .sys-page-subtitle { font-size: var(--fs-xs); }
}

@media (orientation: landscape) and (pointer: coarse) and (max-width: 820px) {
  /* Etiqueta arriba, control abajo cuando la fila no cabe en horizontal. */
  .sys-row { flex-wrap: wrap; gap: var(--space-2); }
  .sys-row-label { flex: 1 1 100%; min-width: 0; }
  /* Selector de color personalizado apilado. */
  .sys-color-pick { flex-wrap: wrap; }
  .sys-color-pick input[type="text"] { width: 100%; }
  /* Tabla de listas de texto (#/CA/ES/EN/NL) → scroll horizontal antes que
   * reventar el ancho. */
  .sys-textlist-table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Vista previa en columna. */
  .sys-preview-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
}


/* =============================================================================
 * 8. TOASTS  ──  reubicar en móvil horizontal
 *
 * En la esquina superior derecha tapan el header/controles en pantallas
 * estrechas. Los pasamos a la zona inferior centrada.
 * ============================================================================= */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 720px) {
  .toast-container {
    top: auto;
    right: auto;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(420px, calc(100vw - 2 * var(--space-3)));
  }
}