/**
 * @file
 * SVF - Botones flotantes (c-bflot).
 *
 * Columna de accesos directos fija en la esquina inferior derecha, en
 * escritorio y en movil. Hasta 5 botones; el color de cada uno se elige en el
 * CMS y el tono del icono (blanco u oscuro) lo calcula el Twig por luminancia.
 *
 * Todas las medidas salen de las variables --bflot-* del bloque de abajo.
 */

.c-bflot {
  /* Medidas */
  --bflot-tam: 56px;          /* lado del boton */
  --bflot-radio: 8px;
  --bflot-gap: 8px;           /* separacion entre botones */
  --bflot-derecha: 28px;      /* separacion al borde derecho */
  --bflot-abajo: 28px;        /* separacion al borde inferior */
  /*
   * Iconos de la lista: 38px (32 en movil).
   * Archivos que sube el editor (pintados o con sus colores originales): el
   * boton menos 4px de aire por lado, 48px aqui y 40px en movil. Se deriva
   * de --bflot-tam, asi que sigue al boton solo.
   */
  --bflot-ico: 38px;
  --bflot-ico-propio: calc(var(--bflot-tam) - 8px);
  --bflot-img: var(--bflot-ico-propio);
  --bflot-texto: 13px;
  --bflot-texto-max: 220px;   /* ancho maximo de la etiqueta en hover */
  --bflot-sombra: 0 6px 18px rgba(0, 0, 0, .18);
  --bflot-z: 900;

  position: fixed;
  right: var(--bflot-derecha);
  bottom: calc(var(--bflot-abajo) + env(safe-area-inset-bottom, 0px));
  z-index: var(--bflot-z);
  /* El contenedor no tapa los clics del contenido que queda debajo. */
  pointer-events: none;
}

.c-bflot * {
  pointer-events: auto;
}

/* Si un editor agrega el componente dos veces, solo se ve el primero. */
.c-bflot ~ .c-bflot {
  display: none;
}

/**
 * Rejilla.
 *
 * Drupal envuelve los parrafos en `div.field > div.field__item`, asi que la
 * columna se arma sobre esos envoltorios en vez de pelear con ellos.
 */
.c-bflot__lista > * {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--bflot-gap);
}

.c-bflot__lista > * > * {
  display: flex;
  justify-content: flex-end;
}

/* Respaldo del maximo de 5 por si la cardinalidad del campo sube. */
.c-bflot__lista > * > *:nth-child(n+6) {
  display: none;
}

/**
 * Boton.
 *
 * --bflot-bg llega como estilo en linea desde el Twig (hex de la paleta o el
 * token --svf-acento del portal); --bflot-fg lo fija la clase de tono.
 */
.c-bflot__boton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--bflot-tam);
  height: var(--bflot-tam);
  border-radius: var(--bflot-radio);
  background-color: var(--bflot-bg, #3d724d);
  color: var(--bflot-fg, #ffffff);
  box-shadow: var(--bflot-sombra);
  text-decoration: none;
  overflow: hidden;
  transition: background-color .18s ease, color .18s ease;
}

.c-bflot__boton--oscuro {
  --bflot-fg: #ffffff;
  /* Boton oscuro: en el hover la tinta es su propio color. */
  --bflot-hover-fg: var(--bflot-bg);
}

.c-bflot__boton--claro {
  --bflot-fg: #1d1d1b;
  /*
   * Boton claro: su propio color no se leeria sobre el blanco del hover
   * (el verde 85aa1a da 2.7:1), asi que la tinta cae a gris oscuro.
   */
  --bflot-hover-fg: #1d1d1b;
}

/*
 * Donde se soporte `color-mix`, en vez del gris se usa el mismo color
 * oscurecido: conserva la identidad del boton y pasa WCAG AA sobre blanco
 * (el verde claro queda en 6.4:1). Si no se soporta, se queda el gris.
 */
@supports (color: color-mix(in srgb, #000000, #ffffff)) {
  .c-bflot__boton--claro {
    --bflot-hover-fg: color-mix(in srgb, var(--bflot-bg) 55%, #111111);
  }
}

/*
 * Hover y foco: el boton se vacia a blanco y el icono toma la tinta de
 * arriba, con un filete del mismo tono para que no desaparezca sobre fondos
 * claros. Antes el fondo tomaba la tinta calculada, y en los botones claros
 * eso daba un fondo casi negro.
 */
.c-bflot__boton:hover,
.c-bflot__boton:focus-visible {
  background-color: var(--bflot-hover-bg, #ffffff);
  color: var(--bflot-hover-fg);
  box-shadow: var(--bflot-sombra), inset 0 0 0 1px var(--bflot-hover-fg);
}

.c-bflot__boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--bflot-hover-fg), var(--bflot-sombra);
}

/**
 * Blindaje contra los estilos de enlace del portal.
 *
 * `css/rionegro-colors.css` trae `body.portal-rionegro a { color: var(--svf-primario) }`
 * (mas el subrayado), y ese selector (2 clases + 2 elementos) le gana a
 * `.c-bflot__boton`: el icono se pinta con currentColor y quedaba morado sobre
 * morado. En el hover coincidia por casualidad con el color correcto.
 *
 * Estos dos selectores suben la especificidad por encima (3 y 4 clases + 1
 * elemento) sin `!important` y sin tocar rionegro-colors.css. El subrayado se
 * quita aqui a proposito: la decoracion se hereda y un hijo no puede anularla.
 */
.c-bflot .c-bflot__lista a.c-bflot__boton {
  color: var(--bflot-fg, #ffffff);
  text-decoration: none;
}

.c-bflot .c-bflot__lista a.c-bflot__boton:hover,
.c-bflot .c-bflot__lista a.c-bflot__boton:focus-visible {
  color: var(--bflot-hover-fg);
  text-decoration: none;
}

/* Icono */
.c-bflot__ico {
  flex: 0 0 var(--bflot-tam);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bflot-tam);
  height: var(--bflot-tam);
}

.c-bflot__ico svg {
  display: block;
  width: var(--bflot-ico);
  height: var(--bflot-ico);
}

/* WhatsApp: reusa el SVG que ya trae el tema, pintado con currentColor. */
.c-bflot__ico-wa {
  display: block;
  width: var(--bflot-ico);
  height: var(--bflot-ico);
  background-color: currentColor;
  -webkit-mask: url("../img/icons/ico-whatsapp.svg") center / contain no-repeat;
  mask: url("../img/icons/ico-whatsapp.svg") center / contain no-repeat;
}

/**
 * Icono propio (field_bfl_icono_archivo).
 *
 * Con "pintar con el color del boton": el archivo se usa como mascara y se
 * rellena con currentColor, asi que sigue el tono calculado y el hover. La
 * mascara toma el canal alfa: sirve para SVG y para PNG con fondo
 * transparente; un PNG con fondo solido sale como un cuadrado lleno.
 * --bflot-ico-url llega en linea desde el Twig (ruta absoluta del sitio).
 */
.c-bflot__ico-mask {
  display: block;
  width: var(--bflot-ico-propio);
  height: var(--bflot-ico-propio);
  background-color: currentColor;
  -webkit-mask: var(--bflot-ico-url) center / contain no-repeat;
  mask: var(--bflot-ico-url) center / contain no-repeat;
}

/**
 * Sin pintar: la imagen con sus colores originales. Suele ser un logo con
 * fondo propio, asi que ocupa casi todo el boton (4px de aire por lado) y
 * redondea sus esquinas al ritmo del boton.
 */
.c-bflot__ico-img {
  display: block;
  width: var(--bflot-img);
  height: var(--bflot-img);
  object-fit: contain;
  border-radius: max(0px, calc(var(--bflot-radio) - 4px));
}

/**
 * Etiqueta.
 *
 * Es el titulo del enlace. Queda recortada (no `display:none`) para que los
 * lectores de pantalla la sigan anunciando como nombre del boton, y se abre
 * hacia la izquierda solo con raton o teclado.
 */
.c-bflot__texto {
  max-width: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--bflot-texto);
  font-weight: 700;
  line-height: 1;
  transition: max-width .25s ease, padding .25s ease, opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-bflot__boton:hover .c-bflot__texto,
  .c-bflot__boton:focus-visible .c-bflot__texto {
    max-width: var(--bflot-texto-max);
    padding: 0 4px 0 18px;
    opacity: 1;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .c-bflot {
    --bflot-derecha: 20px;
    --bflot-abajo: 20px;
  }
}

/* Movil */
@media (max-width: 767.98px) {
  .c-bflot {
    --bflot-tam: 48px;
    --bflot-ico: 32px;
    --bflot-radio: 12px;
    --bflot-gap: 10px;
    --bflot-derecha: 12px;
    --bflot-abajo: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-bflot__boton,
  .c-bflot__texto {
    transition: none;
  }
}

@media print {
  .c-bflot {
    display: none;
  }
}