/* =========================================================================
   FIRMA DE SENDAR STUDIO — componente independiente
   v1.1 · 2026-09-09 · adaptada para ANAPAT Formación el 16-oct-2026 (cerrada también en el móvil; versión compacta)

   No depende de ninguna otra hoja de estilos ni de ninguna librería.
   Todas las clases y variables llevan el prefijo `sendar-` para que no
   choquen con nada del proyecto donde se pegue.

   Para cambiar el aspecto, toca solo el bloque de variables de abajo.
   ========================================================================= */

.sendar-firma {
  /* --- Colores de la marca, tomados del propio logotipo --- */
  --sendar-carmesi: #D62E49;
  --sendar-carmesi-claro: #FF7A8F;
  --sendar-azul: #1D2145;
  --sendar-azul-claro: #2A2F5E;
  --sendar-tinta: #C7CBD8;
  --sendar-tinta-suave: #A6ABBF;
  --sendar-ambar: #F0A02E;

  /* --- Medidas --- */
  --sendar-marca: 46px;          /* tamaño del hexágono */
  --sendar-vuelta: 3.6s;         /* duración de una vuelta completa */
  --sendar-curva: cubic-bezier(.2, .7, .3, 1);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--sendar-tinta);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: gap .4s var(--sendar-curva), padding .4s var(--sendar-curva),
              transform .3s var(--sendar-curva);
}

/* ---------- El halo que respira ---------- */
.sendar-firma__aura {
  position: absolute; inset: -30px; z-index: -3;
  border-radius: 100px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 46, 73, .60), rgba(214, 46, 73, 0) 72%);
  filter: blur(16px);
  animation: sendar-latido var(--sendar-vuelta) ease-in-out infinite;
}

/* ---------- El anillo de luz que da la vuelta al borde ----------
   Se anima el ANGULO del degradado, no el elemento.
   Girar el propio elemento parecia lo evidente, pero al abrirse la pildora
   el rectangulo giratorio se sale por las esquinas y aparece una cuna roja
   fuera del sello. Animando el angulo, la caja no se mueve. */
@property --sendar-angulo {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.sendar-firma::before {
  content: ""; position: absolute; inset: -2px; z-index: -2;
  border-radius: inherit;
  --sendar-angulo: 0deg;
  background: conic-gradient(from var(--sendar-angulo),
      rgba(214, 46, 73, 0) 0deg 190deg,
      var(--sendar-carmesi) 268deg,
      var(--sendar-carmesi-claro) 300deg,
      var(--sendar-carmesi) 332deg,
      rgba(214, 46, 73, 0) 360deg);
  animation: sendar-giro var(--sendar-vuelta) linear infinite;
}
/* El relleno de la píldora, que deja ver el anillo solo por el borde */
.sendar-firma::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(150deg, var(--sendar-azul-claro), var(--sendar-azul) 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ---------- El logotipo ---------- */
.sendar-firma__marca {
  display: block; flex: none;
  width: var(--sendar-marca); height: var(--sendar-marca);
}
.sendar-firma__marca svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* El hexágono gira sobre sí mismo. Como es de seis lados iguales, al
   completar 60° vuelve a su sitio y el giro se ve continuo, sin saltos. */
.sendar-firma__hexes {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: sendar-giro-hex var(--sendar-vuelta) var(--sendar-curva) infinite;
}
.sendar-firma__hex-fuera { transition: fill .3s var(--sendar-curva); }

/* Los dos trazos son un eslabón que se abre y se cierra. Nunca llegan a
   desaparecer: un logotipo vacío parece roto, no animado. */
.sendar-firma__trazo {
  stroke-dasharray: 100;
  animation: sendar-eslabon var(--sendar-vuelta) var(--sendar-curva) infinite;
}
.sendar-firma__trazo--b { animation-delay: .3s; }

/* ---------- El texto, plegado hasta que hace falta ---------- */
.sendar-firma__texto {
  display: grid; grid-template-columns: 0fr;
  opacity: 0;
  font-size: .92rem; line-height: 1.2;
  transition: grid-template-columns .4s var(--sendar-curva), opacity .3s var(--sendar-curva);
}
.sendar-firma__linea {
  min-width: 0; overflow: hidden; white-space: nowrap;
  display: flex; align-items: baseline; gap: 7px;
}
.sendar-firma__texto b { color: #FFFFFF; font-weight: 700; }
.sendar-firma__previo { color: var(--sendar-tinta-suave); }
.sendar-firma__codigo { color: var(--sendar-ambar); font-family: ui-monospace, monospace; font-size: .82em; }

/* ---------- Al pasar el ratón o al llegar con el teclado ---------- */
.sendar-firma:hover,
.sendar-firma:focus-visible {
  gap: 13px; padding-right: 22px;
  transform: translateY(-3px);
}
.sendar-firma:hover .sendar-firma__texto,
.sendar-firma:focus-visible .sendar-firma__texto {
  grid-template-columns: 1fr; opacity: 1;
}
/* Con el ratón encima todo se detiene: el eslabón queda cerrado y el halo
   se queda encendido del todo. Así se lee bien lo que pone. */
.sendar-firma:hover .sendar-firma__trazo,
.sendar-firma:focus-visible .sendar-firma__trazo {
  animation: none; stroke-dashoffset: 0;
}
.sendar-firma:hover .sendar-firma__hexes,
.sendar-firma:focus-visible .sendar-firma__hexes { animation-play-state: paused; }
.sendar-firma:hover .sendar-firma__aura,
.sendar-firma:focus-visible .sendar-firma__aura {
  animation: none; opacity: 1; transform: scale(1.12);
}
.sendar-firma:hover .sendar-firma__hex-fuera { fill: #F0405C; }
.sendar-firma:focus-visible { outline: 3px solid var(--sendar-carmesi-claro); outline-offset: 4px; }

/* ---------- Los movimientos ---------- */
@keyframes sendar-giro { to { --sendar-angulo: 360deg; } }

@keyframes sendar-giro-hex {
  0%   { transform: rotate(0deg); }
  62%  { transform: rotate(0deg); }
  100% { transform: rotate(60deg); }
}

@keyframes sendar-eslabon {
  0%   { stroke-dashoffset: 58; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 58; }
}

@keyframes sendar-latido {
  0%, 100% { opacity: .42; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ---------- En pantalla táctil (ANAPAT, 16-oct-2026) ----------
   En el móvil también sale CERRADA: el primer toque la abre (clase --abierta, la pone el script de
   la firma) y el segundo abre sendar.es. Tocar fuera la vuelve a cerrar. */
.sendar-firma.sendar-firma--abierta { gap: 13px; padding-right: 22px; }
.sendar-firma--abierta .sendar-firma__texto { grid-template-columns: 1fr; opacity: 1; }
.sendar-firma--abierta .sendar-firma__trazo { animation: none; stroke-dashoffset: 0; }
.sendar-firma--abierta .sendar-firma__hexes { animation-play-state: paused; }
.sendar-firma--abierta .sendar-firma__aura { animation: none; opacity: 1; transform: scale(1.12); }
@media (hover: none) {
  .sendar-firma__texto { font-size: .85rem; }
}

/* ---------- Que los estilos del sitio no la toquen (subrayados, colores de enlace) ---------- */
.sendar-firma, .sendar-firma:hover, .sendar-firma:focus, .sendar-firma:visited { text-decoration: none !important; color: var(--sendar-tinta); }

/* ---------- Versión compacta (barra inferior del panel) ---------- */
.sendar-firma--compacta { --sendar-marca: 26px; padding: 4px; }
.sendar-firma--compacta .sendar-firma__texto { font-size: .76rem; }
.sendar-firma--compacta:hover,
.sendar-firma--compacta:focus-visible,
.sendar-firma--compacta.sendar-firma--abierta { gap: 9px; padding-right: 14px; transform: none; }
.sendar-firma--compacta .sendar-firma__aura { inset: -12px; filter: blur(9px); }

/* ---------- Quien tenga el movimiento desactivado ---------- */
@media (prefers-reduced-motion: reduce) {
  .sendar-firma__trazo { animation: none; stroke-dashoffset: 0; }
  .sendar-firma__hexes,
  .sendar-firma__aura,
  .sendar-firma::before { animation: none; }
  .sendar-firma__aura { opacity: .7; }
}