/* =============================================================================
   layout.css — Cabecera, navegación y pie  (src/Views/layout.php)
   -----------------------------------------------------------------------------
   Todo lo que envuelve al contenido: header (escritorio y móvil), offcanvas de
   navegación, barra de contacto del pie, botón "volver arriba" y chat.
   Los componentes que el layout incluye (buscador, mini-carrito, comparador,
   avisos de pruebas…) tienen su propia hoja en componentes/.
   ============================================================================= */

/* Cabecera móvil: barra mínima + badge del carrito. El offcanvas superior de
   navegación baja desde arriba (altura automática). */
#header-logo {
   max-height: 44px;
}

/* Logo de la cabecera de escritorio y el del menú móvil. */
.ss-logo-escritorio {
   max-height: 48px;
}

.ss-logo-menu-movil {
   max-height: 36px;
}

.ss-cart-badge {
   position: absolute;
   top: -6px;
   right: -10px;
   font-size: .65rem;
}

/* Punto de "tienes productos guardados en tu cuenta" (sin sesión). @see CarritoGuardado */
.ss-cart-guardado {
   position: absolute;
   top: -3px;
   right: -6px;
   width: .65rem;
   height: .65rem;
   border-radius: 50%;
   background: var(--ss-first-color, #c10049);
   border: 2px solid #fff;
}

#ss-nav-movil {
   height: auto;
   max-height: 92vh;
}

/* ---------- CATÁLOGO DEL PANEL MÓVIL (_menu_tienda.php, variante 'movil') ----------
   Una fila por enlace a todo lo ancho, de 48px como mínimo (lo que se pide para pulsar con
   el dedo) y separadas por una raya fina. El › en gris dice "se entra" sin competir con el
   nombre. Al tocar, el gris claro de los desplegables: en un móvil no hay hover que avise
   de que el toque ha llegado. El color del texto y el corporativo al pasar por encima los
   pone la regla general de enlaces de base.css. */
.ss-menu-movil__enlace {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   min-height: 3rem;
   padding: .5rem;
   border-bottom: 1px solid #f1f3f5;
   font-size: 1.05rem;
   font-weight: 500;
   text-decoration: none;
   transition: background-color .15s ease;
}

.ss-menu-movil li:last-child .ss-menu-movil__enlace {
   border-bottom: 0;
}

.ss-menu-movil__enlace:active {
   background-color: #f4f4f6;
}

.ss-menu-movil__enlace i {
   font-size: .75rem;
   color: #adb5bd;
}

.ss-menu-movil__ofertas {
   color: var(--ss-first-color, #c10049);
   font-weight: 600;
}

.ss-menu-movil__outlet {
   color: #6f42c1;
   font-weight: 600;
}

/* ---------- CUENTA DEL PANEL MÓVIL ----------
   Debajo del catálogo y separada de él. Cuenta / Pedidos / Favoritos como accesos iguales en
   una fila (dos o tres, según esté activo Favoritos: la rejilla los reparte sola). Si no hay
   buscador ni catálogo encima (proceso de compra), sin raya ni hueco arriba. */
.ss-cuenta-movil:not(:first-child) {
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid #e9ecef;
}

.ss-cuenta-movil__nombre {
   margin-bottom: .75rem;
}

.ss-cuenta-movil__accesos {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
   gap: .5rem;
}

.ss-cuenta-movil__acceso {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .35rem;
   padding: .75rem .25rem;
   border: 1px solid #e9ecef;
   border-radius: 12px;
   font-size: .85rem;
   text-decoration: none;
   transition: background-color .15s ease;
}

.ss-cuenta-movil__acceso i {
   font-size: 1.15rem;
}

.ss-cuenta-movil__acceso:active {
   background-color: #f4f4f6;
}

/* Cabecera escritorio: el buscador crece hasta llenar el hueco entre logo y menú (como flex
   item se quedaba al ancho de contenido del input, demasiado estrecho). El tope evita una
   barra desproporcionada en monitores muy anchos. Solo afecta a la instancia del header:
   la del offcanvas móvil vive fuera de <header> y ya ocupa todo el ancho. */
header .js-buscador {
   flex: 1 1 auto;
   max-width: 30rem;
}

/* El mini-carrito y el menú móvil deben quedar POR ENCIMA de su backdrop (que a su
   vez va por encima del widget de chat). Sin incluir #ss-nav-movil aquí, el backdrop
   forzado tapaba el propio panel del menú (z-index Bootstrap 1045) → se veía
   superoscuro. */
#ss-mini-carrito,
#ss-nav-movil,
#ss-filtros,
#ss-listas,
#ss-cookies-panel {
   z-index: 2147483647 !important;
}

.offcanvas-backdrop {
   z-index: 2147483646 !important;
   /* El velo corporativo (--ss-velo-*, base.css) en vez del negro al 50% de Bootstrap: el
      mismo que se pone detrás del buscador abierto. El tinte va en el COLOR y la opacidad del
      .show sube a 1, porque una opacidad parcial en el elemento debilitaría también el
      desenfoque. El fundido .fade (0 → 1) de Bootstrap sigue funcionando igual. */
   background-color: var(--ss-velo-bg);
   -webkit-backdrop-filter: blur(var(--ss-velo-blur));
   backdrop-filter: blur(var(--ss-velo-blur));
}

.offcanvas-backdrop.show {
   opacity: 1;
}

/* OJO al añadir un offcanvas nuevo: el backdrop de arriba lleva !important y un z-index
   altísimo, así que un panel con el 1045 de Bootstrap se queda DEBAJO de su propia sombra y
   parece que no se abre. Hay que sumarlo a la lista de esta regla. */

/* ---------- "VOLVER ARRIBA" ----------
   Botón flotante, abajo a la derecha, JUSTO ENCIMA del lanzador del chat (oct8ne se coloca
   solo en esa esquina y no publica ninguna clase que podamos usar de referencia, así que la
   separación va aquí a ojo: --ss-arriba-hueco es lo que mide su burbuja más el aire).
   Si algún día el chat cambia de tamaño, se toca SOLO esa variable.

   Aparece cuando se ha bajado un poco (ui.js pone .is-visible). Antes de eso no estorba:
   arriba del todo no serviría para nada y taparía contenido. */
:root {
   --ss-arriba-hueco: 5.5rem;
}

.ss-arriba {
   position: fixed;
   right: 1.25rem;
   bottom: var(--ss-arriba-hueco);
   z-index: 997;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   border: 1px solid #e5e5e5;
   border-radius: 50%;
   background: #fff;
   color: #333;
   font-size: 1rem;
   text-decoration: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
   /* Oculto de partida: sin la clase no se ve NI se puede pulsar ni tabular. */
   opacity: 0;
   visibility: hidden;
   transform: translateY(.5rem);
   transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ss-arriba.is-visible {
   opacity: 1;
   visibility: visible;
   transform: none;
}

.ss-arriba:hover,
.ss-arriba:focus-visible {
   color: var(--ss-first-color, #c10049);
}

.ss-arriba:focus-visible {
   outline: 2px solid var(--ss-first-color, #c10049);
   outline-offset: 2px;
}

/* La barrita fija del pie va centrada y llega hasta bottom:10px: en móvil el botón se sube
   un poco más para no montarse encima de ella. */
@media (max-width: 575.98px) {
   :root {
      --ss-arriba-hueco: 6.5rem;
   }

   .ss-arriba {
      right: .75rem;
      width: 2.5rem;
      height: 2.5rem;
   }
}

/* Quien pide menos movimiento se lleva la aparición seca, sin desplazamiento ni fundido.
   (El caso "sin JS" NO se arregla aquí: como .is-visible la pone ui.js, el botón se quedaría
   escondido para siempre. Lo resuelve sin-js.css.) */
@media (prefers-reduced-motion: reduce) {
   .ss-arriba {
      transition: none;
   }

   .ss-arriba.is-visible {
      transform: none;
   }
}

/* ---------- BARRA DE CONTACTO STICKY (pie) ----------
   Mismo acabado "frosted glass" que la barra sticky de la ficha de producto
   (#barra-producto-sticky en vistas/catalogo/producto.css): semitransparente + desenfoque
   de lo de detrás, en vez del blanco opaco que trae .sticky-footer ul de custom-25.css
   (compartido con site-25, por eso se sobreescribe aquí y no allí).

   El borde gris se cambia por uno negro al 8% —igual que la barra de arriba— porque sobre
   fondo translúcido el #e5e5e5 marcaba demasiado el contorno de la píldora. */
/* APILADO: el 998 de custom-25.css la dejaba por debajo de la barra sticky de la ficha
   (1035) y de la del comparador (1040), asi que en producto quedaba tapada. 1045 la sube
   por encima de las dos SIN pasar del modal (1050/1055) ni del offcanvas del menu movil:
   la barra de contacto no debe verse sobre un dialogo abierto. */
.sticky-footer {
   z-index: 1045;
}

.sticky-footer ul {
   background: rgba(255, 255, 255, .72);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
   border-color: rgba(0, 0, 0, .08);
   box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
}

/* ---------- CHAT (Oct8ne) ----------
   El lanzador lo pinta su propio script (final de layout.php); aquí solo se le pone el
   degradado corporativo. */
#livechat-wrapper {
   background: #E20049 !important;
   background: linear-gradient(10deg, rgba(226, 0, 73, 1) 0%, rgba(26, 43, 109, 1) 100%) !important;
}

#minimize-by-menu {
   background-color: #E20049 !important;
   background: linear-gradient(10deg, rgba(226, 0, 73, 1) 0%, rgba(26, 43, 109, 1) 100%) !important;
}