/* =============================================================================
   Precifilm Review Discounts · aviso en la ficha de producto

   Solo tokens `--p-*` del child theme de Precifilm, sin un color literal. Es
   la misma decisión que Precifilm Product Options: el plugin depende del tema
   para verse, a propósito, para no llevar una segunda paleta que se quede
   desfasada.

   La tarjeta va justo debajo de la caja de compra del tema (`.p-buybox`) y
   repite su borde, su radio y su ancho, para leerse como una pieza más de la
   misma columna. El rótulo pequeño en mayúsculas y monoespaciada es el de
   `.p-buybox__label`.

   Selectores con DOS clases: GeneratePress y la PARTE 1 del tema estilizan
   `p`, `a` y `strong` con reglas de una clase y un elemento (0,1,1), que le
   ganarían a una clase suelta (§17.6 y §17.40 del CLAUDE.md del tema).
   ============================================================================= */

.summary .prd-aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icono cuerpo"
    "icono enlace";
  column-gap: var(--p-space-3);
  row-gap: var(--p-space-2);
  align-items: start;

  margin: var(--p-space-4) 0 0;
  padding: 16px 20px;

  background: var(--p-bg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);

  font-family: var(--p-font-ui);
  color: var(--p-text);
}

.prd-aviso .prd-aviso__icono {
  grid-area: icono;
  display: block;
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  background: var(--p-orange-soft);
  color: var(--p-orange);
}

.prd-aviso .prd-aviso__cuerpo {
  grid-area: cuerpo;
  min-width: 0;
}

.prd-aviso .prd-aviso__rotulo {
  display: block;
  margin: 0 0 4px;
  font-family: var(--p-font-mono);
  font-size: 9.5px;
  letter-spacing: var(--p-ls-mono-wide);
  text-transform: uppercase;
  color: var(--p-text-2);
}

.prd-aviso .prd-aviso__texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--p-text);
}

/* El importe, en el naranja de marca: es el dato de la tarjeta. `wc_price()`
   lo envuelve en varios <span>; se hereda el color hacia dentro. */
.prd-aviso .prd-aviso__texto strong,
.prd-aviso .prd-aviso__texto strong * {
  font-weight: 700;
  color: var(--p-orange);
}

.prd-aviso .prd-aviso__condiciones {
  display: block;
  margin-top: 6px;
  font-family: var(--p-font-mono);
  font-size: 10px;
  letter-spacing: var(--p-ls-mono);
  text-transform: uppercase;
  color: var(--p-text-2);
}

/* Enlace de texto y no botón: en la caja de compra ya hay una CTA naranja,
   «Añadir al carrito», y esta tarjeta no debe competir con ella. */
.prd-aviso .prd-aviso__enlace {
  grid-area: enlace;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  text-decoration: underline;
  text-decoration-color: var(--p-border);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;

  /* El texto mide 22px de alto: poco para un dedo. El relleno lleva la zona
     pulsable a 44px y el margen negativo lo compensa, así que la tarjeta no
     crece. */
  padding: 11px 0;
  margin: -11px 0;
}

.prd-aviso .prd-aviso__enlace:hover,
.prd-aviso .prd-aviso__enlace:focus {
  color: var(--p-orange);
  text-decoration-color: currentColor;
}

.prd-aviso .prd-aviso__enlace:focus-visible {
  outline: 2px solid var(--p-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .prd-aviso .prd-aviso__enlace { transition: none; }
}