/* ==========================================================================
   EL PANEL Y LA APLICACION, CON LA CABECERA DE LA TIENDA  (AutoCustom GT)
   --------------------------------------------------------------------------
   Las rutas del panel (/admin/...) se sirven con la misma cascara que el
   carrito, la cuenta, el pago o el acceso: la cabecera y el pie de la tienda.
   Pero el panel no compra y no busca. Aqui:

     1. la cabecera se queda en marca + cuenta: fuera buscador, carrito,
        selector de idioma, enlace de importar y franja roja de avisos;
     2. la franja de categorias se cambia por el menu del panel (lo pinta la
        aplicacion, teleportado a esta misma franja);
     3. se retira el armazon de la aplicacion (menu lateral con las
        categorias, buscador flotante, cabecera movil y pie de la aplicacion),
        que hacia que el panel pareciese otra web dentro de la tienda;
     4. el contenido se alinea con la cabecera (mismo ancho que el .wrap de la
        tienda, 1240 px) y arranca justo debajo.

   Todo va bajo body:has(.admin-layout): solo afecta a las paginas del panel.

   Y al final, una regla para TODA la aplicacion (carrito, pago, cuenta,
   acceso, pedidos y panel): el armazon viejo (menu lateral, buscador flotante
   y cabecera movil) no se ve en ninguna.
   ========================================================================== */

/* --- 1. Fuera lo que no es del panel ------------------------------------ */
body:has(.admin-layout) #acg-store-header .top-strip,
body:has(.admin-layout) #acg-store-header .header-search,
body:has(.admin-layout) #acg-store-header .acgt-lang,
body:has(.admin-layout) #acg-store-header .account-portal-admin,
body:has(.admin-layout) #acg-store-header .header-actions > a[href="/cart"],
body:has(.admin-layout) #acg-store-header .category-nav-inner {
  display: none !important;
}

/* Cuando la cuenta de verdad esta puesta (con el nombre y su desplegable), el
   enlace fijo "Mi cuenta" de la cascara no pinta nada: se quita. */
body:has(.acg-header-account) #acg-store-header .header-actions > a[href="/login"] {
  display: none !important;
}

/* La cabecera, mas fina: marca a la izquierda, cuenta a la derecha. */
body:has(.admin-layout) #acg-store-header .header-main {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 10px 0;
}

@media (max-width: 960px) {
  body:has(.admin-layout) #acg-store-header .header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    min-height: 0;
    padding: 10px 0;
  }
}

/* --- 2. El menu del panel, en la franja de la cabecera ------------------- */
#acg-store-header .category-nav .acg-admin-nav {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 0 2px;
}

#acg-store-header .category-nav .acg-admin-nav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 15px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

#acg-store-header .category-nav .acg-admin-nav-link:hover,
#acg-store-header .category-nav .acg-admin-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

#acg-store-header .category-nav .acg-admin-nav-link.is-active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 -3px 0 var(--red);
}

/* El ultimo enlace (volver a la tienda) no es una seccion del panel. */
#acg-store-header .category-nav .acg-admin-nav-tienda {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

#acg-store-header .category-nav .acg-admin-nav-tienda:hover {
  color: #ffffff;
}

@media (max-width: 760px) {
  #acg-store-header .category-nav .acg-admin-nav-link {
    padding: 12px 13px;
    font-size: 11.5px;
  }
}

/* --- 3. La cuenta, en el sitio de "Mi cuenta" ---------------------------
   La misma cuenta la usan las paginas del panel y las de la cuenta (carrito,
   pago, perfil y pedidos): el cliente tiene ahi su perfil, sus pedidos y
   cerrar sesion. */
#acg-store-header .header-actions .acg-header-account {
  position: relative;
  display: flex;
  align-items: center;
}

#acg-store-header .header-actions .acg-header-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease;
}

#acg-store-header .header-actions .acg-header-account-btn:hover,
#acg-store-header .header-actions .acg-header-account-btn:focus-visible,
#acg-store-header .header-actions .acg-header-account-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
}

#acg-store-header .header-actions .acg-header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

#acg-store-header .header-actions .acg-header-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 208px;
  padding: 6px;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgb(8 17 30 / 18%);
}

#acg-store-header .header-actions .acg-header-account-menu a,
#acg-store-header .header-actions .acg-header-account-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #101828;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#acg-store-header .header-actions .acg-header-account-menu a:hover,
#acg-store-header .header-actions .acg-header-account-menu a:focus-visible,
#acg-store-header .header-actions .acg-header-account-menu button:hover,
#acg-store-header .header-actions .acg-header-account-menu button:focus-visible {
  background: #f4f6f9;
  color: #c10500;
}

#acg-store-header .header-actions .acg-header-account-menu .acg-header-account-salir {
  color: #b3161b;
}

@media (max-width: 600px) {
  #acg-store-header .header-actions .acg-header-account-btn {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
  }

  #acg-store-header .header-actions .acg-header-account-btn .acg-header-account-nombre,
  #acg-store-header .header-actions .acg-header-account-btn > svg {
    display: none;
  }

  #acg-store-header .header-actions .acg-header-account-menu {
    right: -4px;
  }
}

/* --- 4. Fuera el armazon de la aplicacion ------------------------------- */
body:has(.admin-layout) .sidebar,
body:has(.admin-layout) .top-search-bar,
body:has(.admin-layout) .mobile-header,
body:has(.admin-layout) .footer,
body:has(.admin-layout) .whatsapp-btn {
  display: none !important;
}

body:has(.admin-layout) .content-wrapper {
  margin-left: 0 !important;
  padding-top: 0 !important;
  min-height: calc(100dvh - var(--acg-store-header-h, 120px));
  background: #f4f6f9;
}

body:has(.admin-layout) .main-content {
  padding: 0 !important;
  background: #f4f6f9;
}

/* El aviso de cookies de la tienda no lleva la maquetacion del panel: se
   queda abajo a la izquierda, como en la tienda, sin tapar las tablas. */
body:has(.admin-layout) .cookie-banner {
  z-index: 55;
}

/* --- 5. El armazon viejo, fuera de TODA la aplicacion -------------------
   El menu lateral (con el buscador oscuro y las CATEGORIAS), el buscador
   flotante y la cabecera movil son del diseno viejo. Antes se ocultaban
   pagina a pagina (cuenta y panel); aqui se quitan en todas las paginas de la
   aplicacion, que son las que el cliente ve con la cabecera de la tienda
   encima. Visibles: la cabecera, el contenido y el pie de la tienda. */
body:has(#app .app-layout) .sidebar,
body:has(#app .app-layout) .top-search-bar,
body:has(#app .app-layout) .mobile-header {
  display: none !important;
}

body:has(#app .app-layout) .content-wrapper {
  margin-left: 0 !important;
}

body:has(#app .app-layout) .main-content {
  padding-top: 0 !important;
}

/* --- 6. Las barras de filtros del panel, en pantallas estrechas ---------
   Las vistas del panel (pedidos, productos...) llevan su titulo y sus filtros
   en una fila. En movil esa fila medía mas que la pantalla y obligaba a
   desplazar la pagina entera de lado; aqui se deja que los filtros bajen a su
   propia linea y ocupen el ancho. Las tablas siguen desplazandose dentro de su
   tarjeta, como es normal en una tabla ancha. */
@media (max-width: 760px) {
  body:has(.admin-layout) .admin-main .section-header,
  body:has(.admin-layout) .admin-main .view-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  body:has(.admin-layout) .admin-main .header-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
  }

  body:has(.admin-layout) .admin-main .admin-input,
  body:has(.admin-layout) .admin-main .admin-select,
  body:has(.admin-layout) .admin-main .filter-select {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body:has(.admin-layout) .admin-main .btn {
    max-width: 100%;
  }
}