/* Fanor · Producto — Aviso de compatibilidad (banda entre migas y ficha)
   ─────────────────────────────────────────────────────────────────────────
   Tres estados —warn (ámbar), ok (verde), no (rojo)— que se conmutan con una
   clase en `.fanor-avc`. TODO lo que cambia entre estados vive en variables
   `--avc-<estado>-*` y se recoge en una variable "activa" (`--avc-bg`,
   `--avc-franja`…) declarada por el modificador. El resto del CSS solo usa la
   activa, así que:

     · el JS cambia de estado moviendo UNA clase, sin tocar ni un color;
     · los controles de Elementor escriben las variables por estado sobre el
       wrapper y no pisan nada del layout;
     · añadir un estado es una regla de tres líneas, no otro bloque entero.

   Como en el resto del plugin, los defaults van como FALLBACK inline
   (`var(--x, valor)`) y nunca como declaración suelta: una declaración en el
   propio elemento ganaría al valor heredado del wrapper, que es donde Elementor
   escribe los suyos.
   ───────────────────────────────────────────────────────────────────────── */

.fanor-avc-wrap {
  margin: var(--avc-margin, 0);
}

/* ── Recogida de las variables del estado activo ────────────────────────── */
.fanor-avc--warn {
  --avc-bg: var(--avc-warn-bg, #FFF9E0);
  --avc-franja: var(--avc-warn-franja, #FFC801);
  --avc-bc: var(--avc-warn-bc, var(--avc-warn-franja, #FFC801));
  --avc-ico-color: var(--avc-warn-ico, #F0B400);
  --avc-ico-bg: var(--avc-warn-ico-bg, transparent);
  --avc-titulo-color: var(--avc-warn-titulo, #202124);
  --avc-texto-color: var(--avc-warn-texto, #202124);
  --avc-btn-bg: var(--avc-warn-btn-bg, #FFD026);
  --avc-btn-fg: var(--avc-warn-btn-fg, #1A1A1A);
  --avc-btn-bg-h: var(--avc-warn-btn-bg-hover, var(--avc-warn-btn-bg, #FFD026));
  --avc-btn-fg-h: var(--avc-warn-btn-fg-hover, var(--avc-warn-btn-fg, #1A1A1A));
  --avc-btn-ico-color: var(--avc-warn-btn-ico, var(--avc-warn-btn-fg, #1A1A1A));
  --avc-btn-bc: var(--avc-warn-btn-bc, transparent);
}

.fanor-avc--ok {
  --avc-bg: var(--avc-ok-bg, #EAF8EF);
  --avc-franja: var(--avc-ok-franja, #22C55E);
  --avc-bc: var(--avc-ok-bc, var(--avc-ok-franja, #22C55E));
  --avc-ico-color: var(--avc-ok-ico, #22C55E);
  --avc-ico-bg: var(--avc-ok-ico-bg, transparent);
  --avc-titulo-color: var(--avc-ok-titulo, #202124);
  --avc-texto-color: var(--avc-ok-texto, #202124);
  --avc-btn-bg: var(--avc-ok-btn-bg, #3A7D44);
  --avc-btn-fg: var(--avc-ok-btn-fg, #FFFFFF);
  --avc-btn-bg-h: var(--avc-ok-btn-bg-hover, var(--avc-ok-btn-bg, #3A7D44));
  --avc-btn-fg-h: var(--avc-ok-btn-fg-hover, var(--avc-ok-btn-fg, #FFFFFF));
  --avc-btn-ico-color: var(--avc-ok-btn-ico, var(--avc-ok-btn-fg, #FFFFFF));
  --avc-btn-bc: var(--avc-ok-btn-bc, transparent);
}

.fanor-avc--no {
  --avc-bg: var(--avc-no-bg, #FDECEC);
  --avc-franja: var(--avc-no-franja, #EF4444);
  --avc-bc: var(--avc-no-bc, var(--avc-no-franja, #EF4444));
  --avc-ico-color: var(--avc-no-ico, #EF4444);
  --avc-ico-bg: var(--avc-no-ico-bg, transparent);
  --avc-titulo-color: var(--avc-no-titulo, #202124);
  --avc-texto-color: var(--avc-no-texto, #202124);
  --avc-btn-bg: var(--avc-no-btn-bg, #A91B1B);
  --avc-btn-fg: var(--avc-no-btn-fg, #FFFFFF);
  --avc-btn-bg-h: var(--avc-no-btn-bg-hover, var(--avc-no-btn-bg, #A91B1B));
  --avc-btn-fg-h: var(--avc-no-btn-fg-hover, var(--avc-no-btn-fg, #FFFFFF));
  --avc-btn-ico-color: var(--avc-no-btn-ico, var(--avc-no-btn-fg, #FFFFFF));
  --avc-btn-bc: var(--avc-no-btn-bc, transparent);
}

/* ── La banda ───────────────────────────────────────────────────────────── */
/* La franja de color es el BORDE de la caja y el contorno fino va en un
   `box-shadow: inset`. Así los dos conviven sin markup extra y sin pelearse por
   la misma propiedad: la franja puede ir en un solo lado (DIMENSIONS) mientras
   el contorno rodea la banda entera. */
.fanor-avc {
  align-items: var(--avc-align, center);
  background-color: var(--avc-bg);
  border-color: var(--avc-franja);
  border-radius: var(--avc-radius, 6px);
  border-style: var(--avc-franja-bs, solid);
  border-width: var(--avc-franja-bw, 0 0 10px);
  box-shadow: var(--avc-sombra, none);
  box-sizing: border-box;
  display: flex;
  gap: var(--avc-gap, 16px);
  margin-inline: auto;
  max-width: var(--avc-max, 80rem);
  padding: var(--avc-pad, 18px 24px);
  position: relative;
  width: 100%;
}

/* Contorno fino: `inset` para que no dependa del `border` (ocupado por la
   franja) ni añada tamaño a la caja. Sin grosor declarado no dibuja nada. */
.fanor-avc::after {
  /* En tres propiedades y no en el atajo `border`: el grosor es un DIMENSIONS
     y `border: 1px 0 0 0 solid #ccc` sería inválido (el atajo solo admite un
     grosor para los cuatro lados) y tiraría el contorno entero. */
  border-color: var(--avc-bc);
  border-style: var(--avc-borde-bs, solid);
  border-width: var(--avc-borde-bw, 0);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* ── Ícono ──────────────────────────────────────────────────────────────── */
/* Sin `align-self`: el ícono sigue la alineación vertical de la banda. Así, al
   apilar en móvil —donde la banda alinea arriba— sube a la altura de la primera
   línea del título en lugar de quedarse flotando a media altura de un título de
   tres renglones. */
.fanor-avc__ico {
  align-items: center;
  background-color: var(--avc-ico-bg);
  border-radius: var(--avc-ico-radius, 50%);
  box-sizing: content-box;
  color: var(--avc-ico-color);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--avc-ico, 36px);
  /* El tamaño de la pastilla es `auto` mientras nadie lo fije: así se ajusta al
     ícono más su padding. Los `min-*` son la red de seguridad — con la pastilla
     puesta a cero, la caja no puede aplastar el ícono a 0×0. */
  height: var(--avc-ico-caja, auto);
  justify-content: center;
  line-height: 1;
  min-height: var(--avc-ico, 36px);
  min-width: var(--avc-ico, 36px);
  padding: var(--avc-ico-pad, 0);
  width: var(--avc-ico-caja, auto);
}

/* El tamaño manda por el ALTO y el ancho va en `auto`, para no achatar un SVG
   que no sea cuadrado (el coche del header es 32×24). `font-size` cubre los
   íconos de fuente de la librería de Elementor: los dos salen de la misma
   variable, así que el control funciona con cualquiera de los dos. */
.fanor-avc__ico svg {
  display: block;
  height: var(--avc-ico, 36px);
  width: auto;
}

/* Los íconos del diseño están dibujados a trazo y heredan el grosor de aquí.
   Un SVG subido por el usuario con su propio `stroke-width` no se toca: solo
   se altera el que viene sin él (los del código lo declaran en el <svg>). */
.fanor-avc__ico .fanor-avc__svg {
  stroke-width: var(--avc-ico-grosor, 1.7);
}

/* ── Textos ─────────────────────────────────────────────────────────────── */
.fanor-avc__copy {
  flex: 1 1 auto;
  /* Sin `min-width:0` un título largo no deja encoger la columna y empuja al
     botón fuera de la banda. */
  min-width: 0;
}

.fanor-avc__titulo {
  color: var(--avc-titulo-color);
  font-family: var(--fn-fuente-cond, var(--fanor-font-display));
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: var(--avc-titulo-margin, 0 0 2px);
  text-transform: uppercase;
}

.fanor-avc__texto {
  color: var(--avc-texto-color);
  font-family: var(--fn-fuente, var(--fanor-font-body));
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  margin: var(--avc-texto-margin, 0);
}

/* ── Botón ──────────────────────────────────────────────────────────────── */
/* `!important` en color y borde por el mismo motivo que en la card del grid:
   los temas (Hello incluido) pintan <a> y <button> con reglas propias que
   ganarían por especificidad. El valor sigue saliendo de la variable, así que
   los controles mandan igual. */
/* Sin `:visited` en el grupo: para un <button> no aplica, y para el <a> ya
   basta el `color !important` de aquí. Además, con `:visited` presente Chrome
   congela por privacidad los valores computados de color y fondo del elemento,
   y eso convierte cualquier medición del botón en un falso negativo. */
.fanor-avc__btn,
.fanor-avc__btn:hover,
.fanor-avc__btn:focus {
  align-items: center;
  /* `background-color` y no el atajo `background`: con el atajo, un valor que
     sale de una custom property y encima está en transición se queda pegado al
     color de partida cuando el estado cambia por JS (la banda ya era verde y el
     botón seguía amarillo). Con la propiedad concreta se resuelve siempre. */
  background-color: var(--avc-btn-bg);
  border-color: var(--avc-btn-bc) !important;
  border-radius: var(--avc-btn-radius, 0);
  border-style: var(--avc-btn-bs, solid) !important;
  border-width: var(--avc-btn-bw, 0) !important;
  box-shadow: var(--avc-btn-sombra, none) !important;
  color: var(--avc-btn-fg) !important;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--fn-fuente-cond, var(--fanor-font-display));
  font-size: 16px;
  font-weight: 600;
  gap: var(--avc-btn-gap, 9px);
  justify-content: center;
  line-height: 1.2;
  padding: var(--avc-btn-pad, 12px 20px);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--avc-btn-trans, .18s) ease, color var(--avc-btn-trans, .18s) ease;
}

.fanor-avc__btn:hover,
.fanor-avc__btn:focus {
  background-color: var(--avc-btn-bg-h);
  color: var(--avc-btn-fg-h) !important;
}

/* `color` propio y no heredado del botón: así el ícono puede despegarse del
   color del texto (un coche blanco sobre un botón amarillo). Vacío el control,
   la variable cae al color del texto y no se nota la diferencia.
   Sin `width` fijo: el ancho lo pone el SVG según su proporción — el coche del
   header es 32×24 y con una caja cuadrada saldría achatado. */
.fanor-avc__btn-ico {
  align-items: center;
  color: var(--avc-btn-ico-color, currentColor);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--avc-btn-ico, 16px);
  height: var(--avc-btn-ico, 16px);
  line-height: 1;
}

.fanor-avc__btn-ico svg {
  display: block;
  height: 100%;
  width: auto;
}

/* Sin ícono no hay caja: si no, el `gap` del botón dejaría un hueco delante
   del texto sin nada dentro. */
.fanor-avc__btn-ico:empty {
  display: none;
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
/* Con `is-apila` el botón baja debajo del texto y ocupa el ancho: en 390px una
   fila de tres piezas deja el botón en dos renglones de tres letras. El ícono
   se queda arriba a la izquierda junto al título, que es donde se lee. */
@media (max-width: 767.98px) {
  .fanor-avc.is-apila {
    align-items: flex-start;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .fanor-avc.is-apila .fanor-avc__ico {
    grid-column: 1;
    grid-row: 1;
  }

  .fanor-avc.is-apila .fanor-avc__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .fanor-avc.is-apila .fanor-avc__btn {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}