/* ==========================================================================
   AVISOS DEL SITIO  —  assets/css/avisos.css
   --------------------------------------------------------------------------
   Estilos de los mensajes que se configuran en /admin/avisos.
   Los colores NO se definen acá: los elige el administrador y vienen como
   estilo en línea desde la plantilla.

   Todas las clases empiezan con "aviso" para no chocar con nada existente.
   ========================================================================== */

/* NOTA: la variable --aviso-alto NO se declara acá a propósito.
   Al no estar declarada, los var(--aviso-alto, 30px) de más abajo usan el
   valor de reserva de 30px, que es el alto aproximado de la barra. Cuando el
   JavaScript del layout mide el alto real, la declara y pasa a valer eso.
   Así el sitio se ve bien aunque el JavaScript no llegue a ejecutarse. */


/* --- Franja fina arriba de todo el sitio --------------------------------- */

/* La barra queda "pegada" arriba mientras se hace scroll.
   Es a propósito: el sitio tiene varios elementos anclados al borde superior de
   la pantalla (el encabezado, y la columna de filtros del listado de productos).
   Si la barra se fuera hacia arriba al hacer scroll, esos elementos quedarían
   corridos hacia abajo sin motivo y se vería un hueco raro. Dejándola fija, la
   distancia al borde superior es siempre la misma y todo cierra. */
#avisosBarra {
    position: sticky;
    top: 0;
    z-index: 1035;          /* arriba del encabezado, debajo de los modales */
}

.aviso-barra {
    position: relative;
    z-index: 3;             /* el header del sitio usa z-index 1 */
    width: 100%;
    padding: 6px 16px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .02em;
}

.aviso-barra a {
    text-decoration: underline;
}

.aviso-barra a:hover {
    opacity: .85;
}

@media (max-width: 575.98px) {
    .aviso-barra {
        font-size: .74rem;
        padding: 6px 12px;
    }
}


/* --- Convivencia con el encabezado y el slider de la home ---------------- *
 *
 * El encabezado del sitio es `position: absolute; top: 0`, o sea que flota
 * sobre la página. Si no se lo corre, queda tapado por la barra de avisos.
 *
 * Y el slider de la home mide exactamente una pantalla de alto (100dvh).
 * Al sumarle la barra arriba, la página quedaba más alta que la pantalla y
 * se veía el slider cortado abajo.
 *
 * Las dos cosas se resuelven descontando el alto real de la barra, y sólo
 * cuando hay una barra visible (la clase la agrega el JavaScript).
 * ------------------------------------------------------------------------ */

/* Se usan tres selectores para el mismo efecto, a propósito:
     - "#avisosBarra ~ header" funciona por la sola presencia de la barra en el
       HTML, sin depender de JavaScript.
     - ".aviso-barra ~ header" cubre el caso de que haya quedado en el servidor
       una versión anterior de la plantilla, donde los avisos no iban dentro de
       un contenedor.
     - "body.con-aviso-barra" es el que agrega el JavaScript, y es el que aporta
       la medida exacta.
   Con cualquiera de los tres el logo deja de quedar tapado. */

/* Se usa !important a propósito, y no por comodidad.
   En las páginas de listado de productos hay JavaScript (dentro de
   resources/views/productos.blade.php) que le escribe al encabezado
   "position: fixed; top: -10px" directamente sobre el elemento, y a la columna
   de filtros "position: fixed" con un "top: 20px" escrito en el propio HTML.
   Un estilo escrito sobre el elemento le gana a cualquier hoja de estilos, sin
   importar la especificidad. La única manera de correrlos desde acá es con
   !important. Por eso la barra tapaba el logo y los iconos en esas páginas
   aunque en la home funcionara bien. */

#avisosBarra ~ header,
.aviso-barra ~ header,
body.con-aviso-barra header {
    top: var(--aviso-alto, 30px) !important;
}

/* Columna izquierda del listado de productos (logo + filtros) */
#avisosBarra ~ * #sidebar,
.aviso-barra ~ * #sidebar,
body.con-aviso-barra #sidebar {
    top: calc(20px + var(--aviso-alto, 30px)) !important;
}

/* Panel del menú hamburguesa (y su fondo oscurecido).
   Está anclado al borde superior de la pantalla y ocupa todo el alto, así que
   sin esto el título "Colecciones" queda pegado abajo de la barra. Se lo baja
   y se le descuenta el mismo alto para que no sobresalga por abajo. */
#avisosBarra ~ .drawer,
#avisosBarra ~ * .drawer,
.aviso-barra ~ .drawer,
.aviso-barra ~ * .drawer,
body.con-aviso-barra .drawer,
#avisosBarra ~ .bg-shadow,
#avisosBarra ~ * .bg-shadow,
.aviso-barra ~ .bg-shadow,
.aviso-barra ~ * .bg-shadow,
body.con-aviso-barra .bg-shadow {
    top: var(--aviso-alto, 30px) !important;
    height: calc(100dvh - var(--aviso-alto, 30px)) !important;
}

/* Un respiro extra arriba del contenido del menú, para que el título no quede
   pegado al borde. Es el "bajar un poco todo el texto". */
#avisosBarra ~ .drawer .drawer-body,
#avisosBarra ~ * .drawer .drawer-body,
.aviso-barra ~ .drawer .drawer-body,
.aviso-barra ~ * .drawer .drawer-body,
body.con-aviso-barra .drawer .drawer-body {
    padding-top: 34px;
}

#avisosBarra ~ * #carousel .carousel-inner:not(.product),
.aviso-barra ~ * #carousel .carousel-inner:not(.product),
body.con-aviso-barra #carousel .carousel-inner:not(.product) {
    height: calc(100dvh - var(--aviso-alto, 30px));
}

@media (max-width: 768px) {
    #avisosBarra ~ * #carousel .carousel-inner:not(.product),
    .aviso-barra ~ * #carousel .carousel-inner:not(.product),
    body.con-aviso-barra #carousel .carousel-inner:not(.product) {
        height: calc(100dvh - 56px - var(--aviso-alto, 30px));
    }
}


/* --- Burbuja discreta abajo a la derecha --------------------------------- */

.avisos-burbujas {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1040;          /* por debajo de los modales de Bootstrap (1050) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    pointer-events: none;   /* deja pasar los clics al sitio... */
}

.aviso-burbuja {
    position: relative;
    padding: 11px 32px 11px 14px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    pointer-events: auto;   /* ...pero la burbuja sí es clickeable */
    animation: aviso-aparecer .35s ease;
}

.aviso-burbuja a {
    text-decoration: underline;
}

.aviso-cerrar {
    position: absolute;
    top: 5px;
    right: 9px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
}

.aviso-cerrar:hover {
    opacity: 1;
}

@keyframes aviso-aparecer {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* En celulares la burbuja ocupa el ancho, dejando margen a los costados.
   Se sube un poco para no taparse con el botón flotante de WhatsApp. */
@media (max-width: 575.98px) {
    .avisos-burbujas {
        left: 12px;
        right: 12px;
        bottom: 80px;
        max-width: none;
    }
}


/* --- Dentro del carrito / checkout --------------------------------------- */

.avisos-carrito {
    padding: 0;
    margin-bottom: 1.5rem;
}

.aviso-carrito {
    padding: 1rem;
    border-radius: .35rem;
    font-weight: 800;
    text-align: center;
}

.aviso-carrito + .aviso-carrito {
    margin-top: .6rem;
}

.aviso-carrito a {
    text-decoration: underline;
}


/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .aviso-burbuja { animation: none; }
}