/* ====================================================================
   DevibsFlow · Iconos de fondo
   --------------------------------------------------------------------
   Capa ambiental con los oficios que agendan en el sistema (tijeras,
   loto, diente, estetoscopio, huella, mancuerna…) mezclados con los
   símbolos de la agenda (calendario, reloj, campana). Derivan lento,
   muy tenues, detrás de todo el contenido.

   Cada icono se pinta con `mask-image`: la silueta viene del SVG y el
   COLOR lo pone `background-color`, así el mismo archivo sirve para el
   tema claro y el oscuro sin duplicar nada.

   Lo usan la página de presentación y las pantallas de acceso, por eso
   vive en su propia hoja y no dentro de landing.css.
   ==================================================================== */

.fondo-iconos {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* Se difumina en los bordes para que ningún icono quede cortado en
     seco contra la orilla de la pantalla. */
  -webkit-mask-image: radial-gradient(130% 115% at 50% 45%, #000 55%, transparent 92%);
  mask-image: radial-gradient(130% 115% at 50% 45%, #000 55%, transparent 92%);
}

/* Dentro de una caja concreta (el lado del formulario en el acceso) */
.fondo-iconos.contenida { position: absolute; }

.ico-flota {
  position: absolute;
  background-color: var(--ico-fondo-color, #6D28D9);
  opacity: var(--o, .07);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  animation: derivaIcono var(--dur, 30s) ease-in-out var(--del, 0s) infinite;
  will-change: transform;
}

@keyframes derivaIcono {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(var(--dx, 12px), var(--dy, -24px)) rotate(calc(var(--rot, 0deg) + 7deg)); }
}

/* -- Los oficios ---------------------------------------------------- */

.ic-tijeras {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E");
}

.ic-peine {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18M6.5 7.5v7M10.2 7.5v10M13.8 7.5v10M17.5 7.5v7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18M6.5 7.5v7M10.2 7.5v10M13.8 7.5v10M17.5 7.5v7'/%3E%3C/svg%3E");
}

.ic-loto {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c2 2.6 3 5.1 3 7.6s-1.5 4.4-3 5.4c-1.5-1-3-2.9-3-5.4s1-5 3-7.6z'/%3E%3Cpath d='M12 16.5c-1.6-2.1-4.2-3.6-6.8-3.6.5 3.1 2.6 5.8 6.8 6.8'/%3E%3Cpath d='M12 16.5c1.6-2.1 4.2-3.6 6.8-3.6-.5 3.1-2.6 5.8-6.8 6.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c2 2.6 3 5.1 3 7.6s-1.5 4.4-3 5.4c-1.5-1-3-2.9-3-5.4s1-5 3-7.6z'/%3E%3Cpath d='M12 16.5c-1.6-2.1-4.2-3.6-6.8-3.6.5 3.1 2.6 5.8 6.8 6.8'/%3E%3Cpath d='M12 16.5c1.6-2.1 4.2-3.6 6.8-3.6-.5 3.1-2.6 5.8-6.8 6.8'/%3E%3C/svg%3E");
}

.ic-diente {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.6c-1.5-1-3.1-1.5-4.6-1C5.4 5.2 4.9 7.2 5.4 9.7c.4 2 .8 3.5 1.2 5.5.3 1.6.6 3.4 1.8 3.4s1.3-1.9 1.7-3.6c.3-1.3.6-2.3 1.9-2.3s1.6 1 1.9 2.3c.4 1.7.5 3.6 1.7 3.6s1.5-1.8 1.8-3.4c.4-2 .8-3.5 1.2-5.5.5-2.5 0-4.5-2-5-1.5-.5-3.1 0-4.6 1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.6c-1.5-1-3.1-1.5-4.6-1C5.4 5.2 4.9 7.2 5.4 9.7c.4 2 .8 3.5 1.2 5.5.3 1.6.6 3.4 1.8 3.4s1.3-1.9 1.7-3.6c.3-1.3.6-2.3 1.9-2.3s1.6 1 1.9 2.3c.4 1.7.5 3.6 1.7 3.6s1.5-1.8 1.8-3.4c.4-2 .8-3.5 1.2-5.5.5-2.5 0-4.5-2-5-1.5-.5-3.1 0-4.6 1z'/%3E%3C/svg%3E");
}

.ic-estetoscopio {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v5a4 4 0 0 0 8 0V3M3.6 3h2.2M12.2 3h2.2'/%3E%3Cpath d='M9 12v2.6a4.6 4.6 0 0 0 9.2 0v-1.1'/%3E%3Ccircle cx='18.2' cy='11' r='2.1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v5a4 4 0 0 0 8 0V3M3.6 3h2.2M12.2 3h2.2'/%3E%3Cpath d='M9 12v2.6a4.6 4.6 0 0 0 9.2 0v-1.1'/%3E%3Ccircle cx='18.2' cy='11' r='2.1'/%3E%3C/svg%3E");
}

.ic-huella {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23000'%3E%3Cellipse cx='28' cy='34' rx='10' ry='13'/%3E%3Cellipse cx='50' cy='24' rx='10' ry='14'/%3E%3Cellipse cx='72' cy='34' rx='10' ry='13'/%3E%3Cellipse cx='84' cy='56' rx='9' ry='11'/%3E%3Cpath d='M50 48c-15 0-27 9-27 21 0 8 7 12 15 10 4-1 8-2 12-2s8 1 12 2c8 2 15-2 15-10 0-12-12-21-27-21z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23000'%3E%3Cellipse cx='28' cy='34' rx='10' ry='13'/%3E%3Cellipse cx='50' cy='24' rx='10' ry='14'/%3E%3Cellipse cx='72' cy='34' rx='10' ry='13'/%3E%3Cellipse cx='84' cy='56' rx='9' ry='11'/%3E%3Cpath d='M50 48c-15 0-27 9-27 21 0 8 7 12 15 10 4-1 8-2 12-2s8 1 12 2c8 2 15-2 15-10 0-12-12-21-27-21z'/%3E%3C/svg%3E");
}

.ic-mancuerna {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 6.6v10.8M3.4 9.2v5.6M17.4 6.6v10.8M20.6 9.2v5.6M6.6 12h10.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 6.6v10.8M3.4 9.2v5.6M17.4 6.6v10.8M20.6 9.2v5.6M6.6 12h10.8'/%3E%3C/svg%3E");
}

.ic-esmalte {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='9.5' width='8' height='11' rx='2.2'/%3E%3Cpath d='M10 9.5V7h4v2.5M11 3.2h2v3.8h-2zM8 13.6h8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='9.5' width='8' height='11' rx='2.2'/%3E%3Cpath d='M10 9.5V7h4v2.5M11 3.2h2v3.8h-2zM8 13.6h8'/%3E%3C/svg%3E");
}

/* -- La agenda ------------------------------------------------------ */

.ic-calendario {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15.2' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15.2' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.ic-reloj {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v5.5l3.6 2.1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v5.5l3.6 2.1'/%3E%3C/svg%3E");
}

.ic-campana {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.4a6 6 0 1 0-12 0c0 5.6-2 6.9-2 6.9h16s-2-1.3-2-6.9'/%3E%3Cpath d='M10.4 19.2a2.2 2.2 0 0 0 3.2 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.4a6 6 0 1 0-12 0c0 5.6-2 6.9-2 6.9h16s-2-1.3-2-6.9'/%3E%3Cpath d='M10.4 19.2a2.2 2.2 0 0 0 3.2 0'/%3E%3C/svg%3E");
}

.ic-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.4'/%3E%3C/svg%3E");
}

/* En pantallas chicas estorban más de lo que suman: se quedan los pocos
   que no compiten con el texto. */
@media (max-width: 640px) {
  .ico-flota:nth-child(n + 8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ico-flota { animation: none; }
}