/* ---------------------------------------------------------------------------
   Ajustes propios del sitio publicado. Este archivo NO se regenera desde el
   export de Claude Design: lo que cambies aca sobrevive a un rebuild.
--------------------------------------------------------------------------- */

/* El buscador de la cabecera venia con ancho fijo de 300px desde el diseno.
   En un telefono empujaba la pagina hacia afuera y aparecia scroll horizontal;
   en pantalla chica el campo pasa a ocupar el ancho disponible y el boton baja. */
@media (max-width: 640px) {
  #app div[style*="align-items:stretch"] { flex-wrap: wrap !important; }
  #app input.input { width: 100% !important; min-width: 0 !important; }
}

/* Los titulares del diseno estan pensados para escritorio (hasta 88px). En un
   telefono, un titulo largo como "Comprobante" se salia de la pantalla, asi que
   escalan con el ancho disponible sin perder la proporcion del diseno. */
@media (max-width: 640px) {
  #app h1 { font-size: clamp(32px, 11vw, 64px) !important; }
  #app h2 { font-size: clamp(26px, 8.5vw, 52px) !important; }
  #app h3 { font-size: clamp(24px, 7.5vw, 40px) !important; }
}

/* La cabecera queda fija al hacer scroll (position:sticky en la plantilla).
   En un telefono, la cabecera completa mide 313px porque el buscador, el link
   de preguntas frecuentes y Acceder caen cada uno en su fila: fijarla asi
   taparia un tercio de la pantalla. En pantalla chica se oculta el buscador de
   la cabecera — el mismo buscador esta en el cuerpo de la landing — y la barra
   baja a ~112px con el logo, preguntas frecuentes y Acceder. */
@media (max-width: 640px) {
  #app div[style*="position:sticky"] > div { gap: 14px !important; padding: 10px 20px !important; }
  #app div[style*="position:sticky"] div[style*="padding-left:24px"] {
    padding-left: 0 !important; border-left: 0 !important;
  }

  /* Con sesion iniciada la cabecera arrastra la barra de pestanas y en un
     telefono el bloque no baja de ~260px: un cuarto de la pantalla fijo, justo
     donde el operador necesita ver su lista de tareas. En telefono esa
     cabecera acompana el scroll; la publica sigue fija. */
  #app div[style*="position:sticky"][style*="background:var(--color-bg)"] {
    position: static !important;
  }
}

/* Debajo de 1024px el buscador de la cabecera no entra sin partirla en dos
   filas, asi que se oculta: en tablet la barra queda en 84px y en telefono en
   112px. El seguimiento se sigue consultando desde el bloque de la landing. */
@media (max-width: 1023px) {
  /* se oculta el contenedor entero: si solo se ocultan el campo y el boton,
     queda un hueco vacio que consume el gap y parte la cabecera en dos filas */
  #app div[style*="position:sticky"] div[style*="align-items:stretch"] { display: none !important; }

  /* Con sesion iniciada, la cabecera fija arrastra tambien la barra de
     pestanas. El rotulo de contexto ("Portal del comercio", "Administracion")
     dice lo mismo que las pestanas de abajo, asi que en pantalla angosta se
     oculta y el bloque baja de 199px a 133px. */
  #app div[style*="position:sticky"] div[style*="letter-spacing:0.18em"][style*="text-transform:uppercase"] {
    display: none !important;
  }
  #app div[style*="position:sticky"] > div > div[style*="max-width:1360px"] { gap: 18px !important; }
  #app div[style*="position:sticky"] div[style*="padding-left:28px"] {
    padding-left: 0 !important; border-left: 0 !important;
  }
}

/* En notebooks (menos de ~1420px) la cabecera se partia en dos filas y, al
   quedar fija, ocupaba 162px. Con el espaciado un poco mas ajustado entra en
   una sola fila de 86px, la misma altura que en pantalla grande. */
@media (min-width: 641px) and (max-width: 1420px) {
  #app div[style*="position:sticky"] > div {
    gap: 20px !important; padding-left: 28px !important; padding-right: 28px !important;
  }
  #app div[style*="position:sticky"] input.input { width: 210px !important; }
  #app div[style*="position:sticky"] div[style*="padding-left:24px"] { padding-left: 16px !important; }
}


/* La impresion del comprobante vive en assets/impresion.css. */

/* Ojo: no poner overflow-x:hidden en html o body. Convierte al body en
   contenedor de scroll y rompe position:sticky — con eso dejan de funcionar
   las cabeceras fijas y la barra de resumen del alta de envio. El desborde
   horizontal se corrige elemento por elemento, como arriba. */