/* =================================================================
   AVISO DE «AÑADIDO AL CARRITO»

   Confirma **qué** se acaba de añadir —foto, nombre, la talla o el
   color elegidos y la cantidad— y ofrece la salida al carrito.

   En JRI es la misma pieza para dos vías; aquí solo la usa el
   formulario de la FICHA: la tarjeta del catálogo de Savi Safety no
   lleva botón de añadir, por diseño.

   Antes lo único que cambiaba al añadir era el número del icono de
   la cabecera, y desde la ficha ni eso se veía: la página se recargaba
   entera y el usuario volvía al mismo sitio.

   ── Se estila solo, sin apoyarse en el reset de `base.css` ──
   Ese reset está acotado a `.jri-section`, la cabecera, el pie, la
   ruta y el menú lateral; este aviso cuelga del `<body>` y no es
   ninguno de ellos. Son ocho nodos y los pinta todos `cotizar.js`,
   así que declara lo que necesita en vez de ampliar cinco listas
   `:where()` de un fichero compartido.
   ================================================================= */

.jri-aviso {
  position: fixed;
  /* Bajo la cabecera pegajosa, del lado del icono de carrito: el aviso
     y el número que acaba de cambiar quedan en la misma esquina.
     `--header-h` es el alto REAL de la cabecera (175 en escritorio, 145 y 153 en
     móvil), así que el aviso se recoloca solo. Cuando ese token mentía —decía 90
     en móvil— el aviso caía DENTRO de la cabecera, que va por encima (998 contra
     990), y se veía cortado. El token se arregla en `base.css`, no aquí. */
  top: calc(var(--header-h) + var(--space-3));
  right: var(--space-4);
  width: 340px;
  max-width: calc(100vw - var(--space-4) * 2);

  /* Por debajo de `#brx-header` (998). El menú lateral y su capa oscura
     viven DENTRO de la cabecera, así que con el panel abierto tienen que
     tapar este aviso; con un z-index mayor asomaría por encima. */
  z-index: 990;

  font-family: var(--font);
  line-height: 1.4;
  color: var(--text);
  box-sizing: border-box;

  /* `visibility` además de `opacity`, y no es cosmético: un elemento
     solo transparente **sigue capturando el clic y sigue siendo
     tabulable**, así que «Ver mi lista» robaría el tabulador estando
     invisible. Misma lección que las diapositivas del hero. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.jri-aviso.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.jri-aviso * { box-sizing: border-box; }

.jri-aviso-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--white);
  border-top: 4px solid var(--brand-yellow);
  border-radius: var(--radius-2xl);
  /* Más marcada que `--shadow-card`: esto flota sobre la página, no es
     una tarjeta dentro del flujo. */
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.jri-aviso-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.jri-aviso-img {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--gray-100);
}

/* Sin imagen que enseñar no se deja el hueco gris. */
.jri-aviso-img:not([src]) { display: none; }

.jri-aviso-txt {
  min-width: 0;   /* Sin esto un nombre largo no deja encoger al flex. */
}

.jri-aviso-titulo,
.jri-aviso-nombre,
.jri-aviso-meta {
  margin: 0;
}

.jri-aviso-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-muted-2);
  /* Deja sitio al aspa, que va absoluta en esa esquina. */
  padding-right: var(--space-5);
}

.jri-aviso-nombre {
  font-size: 14px;
  font-weight: 600;
  /* Los nombres de EPP son largos («LENTE DE SEGURIDAD TAALVI TIPO
     GOGGLE CON VENTILACIÓN INDIRECTA»): dos líneas y a otra cosa. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jri-aviso-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.jri-aviso-meta:empty { display: none; }

.jri-aviso-ver {
  display: block;
  padding: 11px var(--space-4);
  background: var(--brand-dark);
  /* Blanco, como el resto de botones de fondo azul. */
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
  text-decoration: none;
  /* El tema mete un interlineado de 60 px en enlaces con aspecto de
     botón. Es el cuarto sitio donde aparece el mismo tropiezo. */
  line-height: 1;
  transition: background .2s;
}

.jri-aviso-ver:hover,
.jri-aviso-ver:focus { background: var(--brand-dark); }

.jri-aviso-cerrar {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.jri-aviso-cerrar:hover {
  background: var(--gray-100);
  color: var(--text);
}

/* -----------------------------------------------------------------
   El latido del contador de la cabecera.

   Va en el **enlace**, no en el `<span>` del número: el fragmento de
   WooCommerce sustituye ese span entero con `outerHTML`, así que
   cualquier clase puesta ahí se la lleva la sustitución. El enlace
   sobrevive.

   Vive en esta hoja y no en `header.css` porque solo tiene sentido
   donde se puede añadir, que es donde se carga `cotizar.js`.
   ----------------------------------------------------------------- */
@keyframes jriPulsoCarrito {
   0%  { transform: none; }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(.94); }
 100%  { transform: none; }
}

.jri-cart-link--pulso { animation: jriPulsoCarrito .45s ease; }

@media (max-width: 767px) {
  .jri-aviso {
    top: calc(var(--header-h) + var(--space-2));
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-width: none;
  }
}

/* Quien pide menos movimiento no debería recibir un aviso que se
   desliza ni un icono que da un salto. Aparecer sí: es la información. */
@media (prefers-reduced-motion: reduce) {
  .jri-aviso {
    transform: none;
    transition: opacity .01s, visibility .01s;
  }

  .jri-cart-link--pulso { animation: none; }
}