/* ==========================================================================
   CABECERA DE TIENDA PARA LAS PAGINAS DEL PANEL  (AutoCustom GT)
   ==========================================================================
   Las paginas del panel (carrito, pago, cuenta, login, pedidos y admin) se
   sirven con admin-app.html y llevaban su propia cabecera fina, distinta de
   la de la tienda. Este fichero les da EXACTAMENTE la misma cabecera.

   Las reglas de abajo NO estan escritas a mano: se extrajeron de la hoja de
   estilo real de la tienda (/assets/home-autocustomgt.css) y se han copiado
   tal cual, con el selector prefijado por #acg-store-header. Asi la cabecera
   del panel no puede desviarse de la de la tienda.

   Generado por ~/.autocustom-audit/paso15/extraer2.py
   ========================================================================== */

/* Altura real del bloque de cabecera (franja + cabecera + menu). La
   actualiza el script de admin-app.html; el valor de aqui es el de
   escritorio y sirve de respaldo si el script no corre. */
:root {
  --acg-store-header-h: 159px;
}

@media (max-width: 1050px) {
  :root { --acg-store-header-h: 168px; }
}

@media (max-width: 760px) {
  :root { --acg-store-header-h: 198px; }
}

/* --------------------------------------------------------------------------
   Blindaje: lo que en la tienda aporta el reset global, aqui acotado al
   bloque de cabecera para no tocar nada del panel.
   -------------------------------------------------------------------------- */
#acg-store-header {
  --red: #e10600;
  --max: 1240px;
  --radius: 14px;
  line-height: normal;
}

#acg-store-header *,
#acg-store-header *::before,
#acg-store-header *::after {
  box-sizing: border-box;
}

#acg-store-header button,
#acg-store-header input {
  font: inherit;
}

/* La tienda aplica a{text-decoration:none;color:inherit}; en el panel hay una
   regla 'a' con mas especificidad, asi que aqui se fija con id. */
#acg-store-header a {
  color: inherit;
  text-decoration: none;
}

/* El panel carga un reset global (*{margin:0;padding:0}) que la tienda NO
   tiene: en la tienda el boton del buscador conserva el relleno por defecto
   del navegador. Aqui se le devuelve ese valor original. */
#acg-store-header button {
  padding: revert;
}

/* El enlace de administracion solo existe en el panel y viaja oculto. */
#acg-store-header a[hidden] {
  display: none !important;
}

/* En las paginas legales, legales-autocustomgt.css trae
   `.wrap{width:var(--legal-col);margin:auto;padding:28px 0 48px}`, que alcanza
   a los .wrap de la cabecera y la estiraba a 97 px (la franja mide 38). En la
   tienda esos .wrap no llevan relleno. Esta regla va ANTES de las copiadas de
   la tienda a proposito: asi las de la tienda (por ejemplo el `padding:7px 0`
   de la franja en pantallas estrechas) siguen teniendo la ultima palabra. */
#acg-store-header .wrap {
  padding: 0;
}


/* --------------------------------------------------------------------------
   Reglas copiadas de la tienda
   -------------------------------------------------------------------------- */
  #acg-store-header * {
    box-sizing: border-box;
  }
  #acg-store-header .wrap {
    width: min(var(--max),calc(100% - 36px));
    margin: auto;
  }
  #acg-store-header a {
    text-decoration: none;
    color: inherit;
  }
  #acg-store-header button,
  #acg-store-header input {
    font: inherit;
  }
  #acg-store-header .top-strip {
    background: var(--red);
    color: rgb(255, 255, 255);
    font-weight: 800;
    font-size: 13px;
  }
  #acg-store-header .top-strip-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
  }
  #acg-store-header .top-strip a {
    text-decoration: underline;
    margin-left: auto;
  }
  #acg-store-header .site-header {
    background: rgb(9, 17, 30);
    color: rgb(255, 255, 255);
    position: relative;
    z-index: 20;
  }
  #acg-store-header .header-main {
    min-height: 78px;
    display: grid;
    grid-template-columns: 200px minmax(320px, 1fr) auto;
    align-items: center;
    gap: 24px;
  }
  #acg-store-header .brand {
    font-weight: 900;
    letter-spacing: -1.4px;
    font-size: 25px;
    white-space: nowrap;
  }
  #acg-store-header .brand span {
    color: var(--red);
  }
  #acg-store-header .header-search {
    display: flex;
    height: 46px;
    background: rgb(255, 255, 255);
    border-radius: var(--radius);
    overflow: hidden;
  }
  #acg-store-header .header-search input {
    border: 0px;
    outline: 0px;
    padding: 0px 16px;
    flex: 1 1 0%;
    min-width: 0px;
  }
  #acg-store-header .header-search button {
    width: 54px;
    border: 0px;
    border-radius: var(--radius);
    background: var(--red);
    color: rgb(255, 255, 255);
    font-size: 24px;
    cursor: pointer;
  }
  #acg-store-header .header-actions {
    display: flex;
    gap: 20px;
    font-weight: 800;
    font-size: 13px;
  }
  #acg-store-header .header-actions a {
    display: flex;
    gap: 7px;
    align-items: center;
  }
  #acg-store-header .category-nav {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgb(13, 23, 38);
  }
  #acg-store-header .category-nav-inner {
    display: flex;
    overflow: auto;
    white-space: nowrap;
  }
  #acg-store-header .category-nav a {
    padding: 14px 15px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }
  #acg-store-header .category-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }
  #acg-store-header .category-nav-inner {
    justify-content: center;
  }
  #acg-store-header .top-strip {
    background: rgb(225, 6, 0) !important;
    color: rgb(255, 255, 255) !important;
  }
  #acg-store-header .top-strip span,
  #acg-store-header .top-strip a,
  #acg-store-header .top-strip a:visited,
  #acg-store-header .top-strip a:hover,
  #acg-store-header .top-strip a:focus {
    color: rgb(255, 255, 255) !important;
  }
  #acg-store-header .top-strip a {
    text-decoration: underline;
  }
  #acg-store-header button[type="submit"] {
    background: rgb(225, 6, 0) !important;
    color: rgb(255, 255, 255) !important;
  }

@media (max-width: 1050px) {
}

@media (max-width: 760px) {
    #acg-store-header .wrap {
      width: min(100% - 24px,var(--max));
    }
    #acg-store-header .top-hide-mobile {
      display: none;
    }
    #acg-store-header .top-strip-inner {
      flex-wrap: wrap;
      padding: 7px 0px;
    }
    #acg-store-header .category-nav-inner {
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    #acg-store-header .category-nav a {
      flex: 0 0 auto;
    }
}


/* ==========================================================================
   PIE DE TIENDA PARA TODO EL SITIO  (AutoCustom GT)
   ==========================================================================
   El pie del inicio (logo, columnas Tienda / Ayuda / Legal y linea de abajo)
   lo llevaban la portada, categoria, producto, buscador y quienes-somos, pero
   NO lo llevaban las paginas del panel (carrito, cuenta, login, pago, registro,
   pedidos) ni las legales, informativas y el 404: esas paginas acababan sin pie
   y se veian distintas del inicio.

   Las reglas de abajo NO estan escritas a mano: se extrajeron de la hoja de
   estilo real de la tienda y se copiaron tal cual, acotadas a #acg-store-footer.

   Generado por ~/.autocustom-audit/paso15/extraer2.py
   ========================================================================== */
#acg-store-footer {
  --red: #e10600;
  --red2: #c10500;
  --ink: #09111e;
  --ink2: #111c2d;
  --muted: #687386;
  --line: #e4e8ee;
  --soft: #f4f6f9;
  --white: #fff;
  --max: 1240px;
  --radius: 14px;
  --wa: #25d366;
  --shadow: 0 16px 45px rgba(8, 17, 30, 0.12);
  position: relative;
  /* El pie del inicio hereda la tipografia base del navegador (16 px) y la
     fuente de la tienda. Las paginas del panel tienen su propio tamano base
     (15 px), asi que se fijan aqui: si no, la descripcion del pie se veria mas
     pequena que en el inicio. */
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: normal;
  text-align: start;
}

/* --------------------------------------------------------------------------
   Blindaje contra las hojas de cada pagina
   --------------------------------------------------------------------------
   Las paginas donde vive este pie traen reglas propias para `footer`, `p`,
   `h3`, `a`... (legales-autocustomgt.css tiene hasta `footer p{...}`, heredado
   del pie que esas paginas tenian antes) que no tienen nada que ver con el pie
   de la tienda: le cambiaban el alto de linea, el tamano de letra, los
   margenes y la alineacion (la descripcion pasaba de 3 lineas a 2 y el pie de
   349 px a 331).

   `all: revert` devuelve cada propiedad de cada elemento del pie a lo que
   valdria SIN las declaraciones de estas hojas; es decir, a los valores del
   navegador, que son los mismos que tiene el pie del inicio. Va con :where()
   para que su especificidad sea solo la del id: asi las reglas de la tienda
   copiadas mas abajo (mas especificas) son siempre las que mandan.

   El boton flotante se queda fuera a proposito: su icono es un SVG con
   width/height/fill en atributos, y `all: revert` los anularia.
   -------------------------------------------------------------------------- */
#acg-store-footer :where(.site-footer, .site-footer *):not(svg):not(svg *) {
  all: revert;
}


/* --------------------------------------------------------------------------
   Reglas copiadas de la tienda (boton flotante de WhatsApp)
   -------------------------------------------------------------------------- */
  #acg-store-footer * {
    box-sizing: border-box;
  }
  #acg-store-footer a {
    text-decoration: none;
    color: inherit;
  }
  #acg-store-footer .whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wa);
    color: white;
    box-shadow: rgba(0, 0, 0, 0.333) 0px 5px 18px;
  }
  #acg-store-footer .whatsapp-float:focus-visible {
    outline: rgb(16, 24, 40) solid 3px;
    outline-offset: 3px;
  }

@media (max-width: 760px) {
    #acg-store-footer .whatsapp-float {
      right: 14px;
      bottom: 14px;
      width: 52px;
      height: 52px;
    }
}

/* --------------------------------------------------------------------------
   Reglas copiadas de la tienda (pie de pagina)
   -------------------------------------------------------------------------- */
  #acg-store-footer * {
    box-sizing: border-box;
  }
  #acg-store-footer .wrap {
    width: min(var(--max),calc(100% - 36px));
    margin: auto;
  }
  #acg-store-footer a {
    text-decoration: none;
    color: inherit;
  }
  #acg-store-footer button,
  #acg-store-footer input {
    font: inherit;
  }
  #acg-store-footer .brand {
    font-weight: 900;
    letter-spacing: -1.4px;
    font-size: 25px;
    white-space: nowrap;
  }
  #acg-store-footer .brand span {
    color: var(--red);
  }
  #acg-store-footer .site-footer {
    background: rgb(5, 10, 18);
    color: rgb(212, 218, 227);
    padding: 48px 0px 20px;
  }
  #acg-store-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 32px;
  }
  #acg-store-footer .footer-logo {
    font-size: 24px;
    color: rgb(255, 255, 255);
  }
  #acg-store-footer .footer-brand p {
    color: rgb(143, 153, 168);
    line-height: 1.6;
    max-width: 420px;
  }
  #acg-store-footer .footer-grid h3 {
    color: rgb(255, 255, 255);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0px 0px 14px;
  }
  #acg-store-footer .footer-grid > div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #acg-store-footer .footer-grid a {
    font-size: 13px;
    color: rgb(174, 182, 194);
  }
  #acg-store-footer .footer-grid a:hover {
    color: rgb(255, 255, 255);
    text-decoration: underline;
  }
  #acg-store-footer .footer-bottom {
    border-top: 1px solid rgb(32, 40, 55);
    margin-top: 30px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    color: rgb(127, 137, 152);
    font-size: 11px;
  }

@media (max-width: 1050px) {
    #acg-store-footer .footer-grid {
      grid-template-columns: 1.4fr 1fr 1fr;
    }
    #acg-store-footer .footer-grid > div:last-child {
      grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    #acg-store-footer .wrap {
      width: min(100% - 24px,var(--max));
    }
    #acg-store-footer .brand {
      font-size: 21px;
    }
    #acg-store-footer .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
    #acg-store-footer .footer-brand {
      grid-column: 1 / -1;
    }
    #acg-store-footer .footer-grid > div:last-child {
      grid-column: 1 / -1;
    }
    #acg-store-footer .footer-bottom {
      flex-direction: column;
      gap: 7px;
    }
    #acg-store-footer .footer-grid {
      gap: 22px;
    }
}


/* ==========================================================================
   Lo mismo que el inicio: franja en rojo oscuro y banda del traductor
   --------------------------------------------------------------------------
   Son los bloques <style> que lleva la portada (ver paso15/construir_tienda.py).
   Van despues de las reglas copiadas a proposito: tienen la misma especificidad
   y el mismo !important, asi que gana la ultima. El boton del buscador se acota
   a la cabecera: en el panel hay formularios propios (login, pago) que no deben
   cambiar de color.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Neutralizaciones de lo que otras paginas aplican a estos mismos elementos
   --------------------------------------------------------------------------
   El 404 define su propia .site-header (display:flex, min-height:78/68 px,
   padding lateral); en la tienda es display:block, sin alto minimo ni relleno.
   Se fijan aqui los valores medidos en el inicio. */
#acg-store-header .site-header {
  display: block;
  min-height: 0;
  align-items: normal;
  padding: 0;
}

#acg-store-header .top-strip {
  background: #e10600 !important;
  color: #ffffff !important;
}

#acg-store-header .top-strip span,
#acg-store-header .top-strip a,
#acg-store-header .top-strip a:visited,
#acg-store-header .top-strip a:hover,
#acg-store-header .top-strip a:focus {
  color: #ffffff !important;
}

#acg-store-header .top-strip a {
  text-decoration: underline;
}

/* legales-autocustomgt.css aplica `text-underline-offset: 3px` a los enlaces y
   desplazaba el subrayado de "Ver tarifas de envio" en la franja. En el inicio
   el subrayado va en su sitio natural (lo vio la comparacion pixel a pixel). */
#acg-store-header a {
  text-underline-offset: auto;
  text-decoration-thickness: auto;
}

#acg-store-header button[type="submit"] {
  background: #e10600 !important;
  color: #ffffff !important;
}

#acg-store-header .autocustom-translate-bar {
  background: #080f18 !important;
  box-shadow: 0 0 0 100vmax #080f18;
  clip-path: inset(0 -100vmax);
}

#google_translate_element .goog-te-gadget-simple {
  background: #080f18 !important;
  border: 1px solid #657080 !important;
  border-radius: 5px;
  padding: 5px 8px !important;
}

#google_translate_element .goog-te-gadget-simple a,
#google_translate_element .goog-te-gadget-simple span {
  color: #fff !important;
}

/* El panel trae su propio juego de reglas para el widget de Google (ancho
   minimo, tipografia de 14 px, altura 34 px...) porque en el panel el selector
   vivia en el boton flotante. Aqui se anulan para que el widget se mida igual
   que en la tienda: si no, la banda y la cabecera caen 3 px mas abajo. */
#acg-store-header #google_translate_element {
  min-width: 0;
  display: block;
  align-items: normal;
}

#acg-store-header #google_translate_element .goog-te-gadget {
  font-size: 11px !important;
  line-height: normal !important;
  color: #666666 !important;
  min-height: 0;
}

#acg-store-header #google_translate_element .goog-te-gadget-simple {
  display: inline-block !important;
  align-items: normal;
  min-height: 0;
  font-size: 13.3333px !important;
  padding: 5px 8px !important;
  background: #080f18 !important;
  border: 1px solid #657080 !important;
  border-radius: 5px;
  font-family: inherit !important;
}

#acg-store-header #google_translate_element .goog-te-gadget-simple a,
#acg-store-header #google_translate_element .goog-te-gadget-simple span,
#acg-store-header #google_translate_element .goog-te-menu-value {
  color: #ffffff !important;
  display: inline !important;
  text-decoration: none !important;
  /* El panel deja gap/align-items de flex en ese enlace; con display:inline no
     hacen nada, pero se devuelven a su valor inicial para que la ficha medida
     coincida tambien en esas propiedades. */
  gap: normal !important;
  align-items: normal !important;
}

/* El bundle del panel trae una regla global que oculta el icono del widget
   (`.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon{
   display:none!important}`, en /assets/index-*.css). En el inicio el icono se
   ve, y ademas es lo que hace que la banda mida 47 px en vez de 44: al
   ocultarlo, la cabecera entera sube 3 px. Aqui se restaura, solo dentro de la
   cabecera (el marco del banner de Google sigue oculto, como en la tienda). */
#acg-store-header #google_translate_element img.goog-te-gadget-icon {
  display: inline !important;
}

/* La aplicacion del panel trae su propio boton flotante de idioma. El inicio no
   lo tiene: el selector vive en la banda, asi que aqui se oculta el otro para
   que haya uno solo, como en la tienda. */
#google_translate_target_desktop,
#google_translate_target_mobile {
  display: none !important;
}

/* ==========================================================================
   Pie de pagina y boton flotante de la tienda en las paginas del panel
   --------------------------------------------------------------------------
   El panel trae su propio pie de aplicacion (footer.footer: logotipo en imagen,
   credito de desarrollo y enlaces a rutas de la SPA) y su propio boton flotante
   de WhatsApp (60x60 a 24px, con otro mensaje). En su lugar va el pie del inicio
   (admin-app.html) y el boton de la tienda (.whatsapp-float), para que las
   paginas del panel no se distingan de la tienda. */
#app footer.footer {
  display: none !important;
}

.whatsapp-btn {
  display: none !important;
}

/* El boton del pie "Configurar cookies" es el mismo que inyecta
   autocustom-consent.js en la tienda (misma posicion y mismos estilos en
   linea), asi que no se toca: se mide igual que el de la portada. */

/* ==========================================================================
   Alto de las paginas del panel
   --------------------------------------------------------------------------
   account-portal.css calculaba el alto disponible restando 76 px (lo que
   medía la cabecera fina). Ahora la cabecera es la de la tienda, asi que se
   resta su alto real (--acg-store-header-h). Asi las paginas del panel miden
   lo mismo que median antes: solo cambia donde empieza el contenido.
   ========================================================================== */
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .content-wrapper,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .login-container,
body:has(.login-container, .register-container, .profile-view, .orders-page, .cart-page, .checkout-page, .payment-state) .register-container {
  min-height: calc(100dvh - var(--acg-store-header-h));
}

#app .app-layout {
  min-height: calc(100dvh - var(--acg-store-header-h));
}

/* Iconos SVG de la cabecera y del pie en las paginas del panel: mismas
   medidas que en la tienda. */
#acg-store-header .header-search button svg{width:24px;height:24px;display:block;margin:0 auto}
#acg-store-footer .footer-contact a{display:inline-flex;align-items:center;gap:7px}
#acg-store-footer .footer-contact svg{width:15px;height:15px;flex:0 0 auto}

/* Iconos de galeria (Lucide 0.544.0, ISC). El tamano se ajusta al contexto;
   el color lo hereda del texto por stroke:currentColor. */
.acg-ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.header-actions .acg-ic{width:1em;height:1em}
.header-search .acg-ic{width:24px;height:24px}

/* ==========================================================================
   CABECERA - estado final de la rejilla (todas las pantallas)
   --------------------------------------------------------------------------
   Estas reglas van al final a proposito: sustituyen a las de cabecera de mas
   arriba, que venian de parches superpuestos. La rejilla tiene siempre las
   mismas dos zonas, asi los botones de cuenta y carrito acompanan siempre a la
   marca y nunca se caen solos a otra linea:

     >=961px : [marca] [buscador ..........................] [acciones]
     <=960px : [marca ........................ acciones]
               [buscador ............................................]
     <=600px : las acciones se quedan en icono, con 44x44 px de area tactil
     <=960px : los enlaces miden 44 px de alto (pulgar), nunca 31

   El mismo bloque existe en las dos hojas publicadas (esta, la de la tienda, y
   store-header.css para el panel, con el prefijo #acg-store-header) y se genera
   desde la misma lista de reglas: no pueden desviarse.
   ========================================================================== */
  #acg-store-header .header-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,2.2vw,30px);min-height:78px;padding:12px 0}
  #acg-store-header .header-main>*{min-width:0}
  #acg-store-header .brand{font-size:25px;font-weight:900;letter-spacing:-1.4px;white-space:nowrap;justify-self:start}
  #acg-store-header .brand span{color:var(--red)}
  #acg-store-header .header-search{display:flex;width:100%;min-width:0;height:46px;background:#fff;border-radius:var(--radius);overflow:hidden}
  #acg-store-header .header-search input{width:100%;border:0;outline:0;padding:0 16px;font-size:15px;min-width:0;color:#101828}
  #acg-store-header .header-search input::placeholder{color:#7b8697}
  #acg-store-header .header-search button{flex:0 0 54px;width:54px;border:0;border-radius:var(--radius);background:var(--red);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
  #acg-store-header .header-search button:hover{background:#c10500}
  #acg-store-header .header-actions{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);font-weight:800;font-size:13px;white-space:nowrap;justify-self:end;margin:0;padding:0}
  #acg-store-header .header-actions a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 11px;border-radius:10px;color:#fff;transition:background .18s ease}
  #acg-store-header .header-actions a:hover,#acg-store-header .header-actions a:focus-visible{background:rgba(255,255,255,.10)}
  #acg-store-header .header-actions a:focus-visible{outline:2px solid #fff;outline-offset:2px}
  #acg-store-header .header-actions .acg-ic{width:17px;height:17px}
  #acg-store-header .brand:focus-visible,#acg-store-header .category-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
  #acg-store-header .top-strip-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px clamp(12px,2vw,24px);min-height:38px;padding:6px 0;text-align:center}
  #acg-store-header .category-nav-inner{padding:0 2px;overscroll-behavior-x:contain}
@media(max-width:960px){
  #acg-store-header .header-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "search search";gap:10px 16px;padding:12px 0}
  #acg-store-header .brand{grid-area:brand;font-size:22px}
  #acg-store-header .header-search{grid-area:search}
  #acg-store-header .header-actions{grid-area:actions;grid-column:auto}
  #acg-store-header .header-actions a{min-height:44px;padding:10px 12px}
}
@media(max-width:760px){
  #acg-store-header .top-strip-inner{font-size:11.5px;gap:4px 12px;min-height:0;padding:7px 0}
  #acg-store-header .header-main{min-height:0;padding:10px 0;gap:8px 12px}
  #acg-store-header .brand{font-size:21px}
  #acg-store-header .header-search{height:44px}
  #acg-store-header .header-search input{font-size:16px}
  #acg-store-header .header-search button{flex-basis:50px;width:50px}
}
@media(max-width:600px){
  #acg-store-header .header-actions{gap:4px}
  #acg-store-header .header-actions a{width:44px;height:44px;justify-content:center;padding:0;background:rgba(255,255,255,.07)}
  #acg-store-header .header-actions a span{display:none}
  #acg-store-header .header-actions .acg-ic{width:20px;height:20px}
}
@media(max-width:380px){
  #acg-store-header .header-main{gap:6px 10px}
  #acg-store-header .brand{font-size:19px}
  #acg-store-header .header-actions a{width:44px;height:44px}
  #acg-store-header .header-search{height:42px}
  #acg-store-header .header-search button{flex-basis:46px;width:46px}
}

/* ==========================================================================
   MENU DE CATEGORIAS - arreglo de recorte y desplazamiento (20261009)
   --------------------------------------------------------------------------
   Antes la fila se centraba con justify-content:center; cuando los enlaces no
   cabian, el navegador recortaba los primeros por la izquierda y quedaban
   fuera de alcance: se veia "cortado" y el deslizamiento arrancaba a medias.

   Ahora el centrado se consigue con un margen automatico en el primer y el
   ultimo enlace: si caben, la fila queda centrada; si no caben, ambos margenes
   valen cero, la fila empieza en el borde y se desliza completa. Nunca se
   pierde ningun enlace.

   La barra de scroll se oculta (se sigue deslizando con el dedo, la rueda y el
   teclado), los enlaces tienen area tactil de 44 px y el tamano se ajusta por
   anchos para que los siete quepan en portatiles.
   ========================================================================== */
#acg-store-header .category-nav { position: relative; }
#acg-store-header .category-nav-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 14px;
  gap: 0;
  padding: 0;
}
#acg-store-header .category-nav-inner::-webkit-scrollbar { display: none; width: 0; height: 0; }
#acg-store-header .category-nav-inner > a:first-child { margin-left: auto; }
#acg-store-header .category-nav-inner > a:last-child { margin-right: auto; }
#acg-store-header .category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  padding: 14px 15px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
#acg-store-header .category-nav a:hover,
#acg-store-header .category-nav a:focus-visible { background: rgba(255,255,255,.10); color: #ffffff; }
#acg-store-header .category-nav a:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; }

/* Que los siete enlaces quepan en pantallas de portatil. */
@media (max-width: 1300px) {
  #acg-store-header .category-nav a { padding: 13px 12px; font-size: 11.5px; }
}
@media (max-width: 1100px) {
  #acg-store-header .category-nav a { padding: 12px 10px; font-size: 11px; }
}
/* En cuanto la fila puede necesitar deslizamiento, ocupa todo el ancho y
   empieza con el mismo margen de la pagina, para que el corte quede en el
   borde de la pantalla y no dentro del contenido. */
@media (max-width: 960px) {
  #acg-store-header .category-nav-inner { width: 100%; padding: 0 12px; scroll-padding-inline: 12px; }
  #acg-store-header .category-nav a { min-height: 44px; padding: 12px 10px; font-size: 11px; }
}

/* ==========================================================================
   SIN PANTALLA DE CARGA EN LAS PAGINAS DEL PANEL (20261009)
   --------------------------------------------------------------------------
   La aplicacion del panel arrancaba con una pantalla azul fija (clase
   .splash-screen) con un circulo girando y el texto "Verificando sesion...",
   que tapaba toda la pagina mientras comprobaba la sesion. Se quita: la
   cabecera y el pie de la tienda son HTML de la propia pagina, asi que se ven
   al instante y el contenido aparece en cuanto esta listo.

   La pantalla se conserva SOLO si la conexion falla de verdad: en ese caso la
   aplicacion anade el aviso "No se pudo conectar tras varios intentos" y un
   boton "Reintentar" (clase .btn). Por eso se oculta unicamente cuando la
   pantalla NO trae ese boton.

   :has() lo entienden los navegadores actuales; en uno antiguo la regla se
   descarta entera y el comportamiento es el de antes, sin romper nada.
   ========================================================================== */
.splash-screen:not(:has(.btn)) {
  display: none !important;
}