/* =====================================================================
   Ronda 5 (09/10/2026): iconos "reales" de color
   Casilla blanca con borde gris y el icono con el color que le corresponde (calendario rojo, documento azul, teléfono verde…),
   con un relleno suave del mismo color. Los logos de WhatsApp y Google no cambian. Contraste del trazo sobre blanco ≥ 3:1.
   ===================================================================== */
:is(.b-nodo__icono, .b-sit__icono, .b-tarjeta__icono, .b-chipd__ico, .b-noti__icono, .b-hub__icono, .b-camino__marca, .b-decides__icono,
  .m-opcion__icono, .ct-paso__marca, .ct-tarjeta__icono, .b-ruta__marca, .b-trad__ico, .b-gloso__ico, .b-comb__icono, .b-opcion__ico, .b-mapa__pin,
  .h-prob__icono, .hv-aviso__icono, .h-zona__icono, .cs2-circulo, .cierre__icono):has(svg.icono) {
  background: var(--blanco); border: 2px solid var(--gris);
}
:is(.b-nodo__icono, .b-sit__icono, .b-tarjeta__icono, .b-chipd__ico, .b-noti__icono, .b-hub__icono, .b-camino__marca, .b-decides__icono,
  .m-opcion__icono, .ct-paso__marca, .ct-tarjeta__icono, .b-ruta__marca, .b-trad__ico, .b-gloso__ico, .b-comb__icono, .b-opcion__ico, .b-mapa__pin,
  .h-prob__icono, .hv-aviso__icono, .h-zona__icono, .cs2-circulo, .cierre__icono) svg.icono {
  color: var(--ic, var(--verde)); fill: var(--ic, var(--verde)); fill-opacity: .16;
}
:is(.version-b, .pagina-inicio) svg.icono--n-pantalla { --ic: #2563EB; }
:is(.version-b, .pagina-inicio) svg.icono--n-documento { --ic: #3B6FD8; }
:is(.version-b, .pagina-inicio) svg.icono--n-papeles { --ic: #5B5BD6; }
:is(.version-b, .pagina-inicio) svg.icono--n-telefono { --ic: #15803D; }
:is(.version-b, .pagina-inicio) svg.icono--n-pin { --ic: #DC2626; }
:is(.version-b, .pagina-inicio) svg.icono--n-estrella { --ic: #D97706; }
:is(.version-b, .pagina-inicio) svg.icono--n-calendario { --ic: #E0402F; }
:is(.version-b, .pagina-inicio) svg.icono--n-herramienta { --ic: #B45309; }
:is(.version-b, .pagina-inicio) svg.icono--n-engranaje { --ic: #E9A800; }   /* el "sol": amarillo */
:is(.version-b, .pagina-inicio) svg.icono--n-buscar { --ic: #0284C7; }
:is(.version-b, .pagina-inicio) svg.icono--n-euro { --ic: #15803D; }
:is(.version-b, .pagina-inicio) svg.icono--n-micro { --ic: #DB2777; }
:is(.version-b, .pagina-inicio) svg.icono--n-campana { --ic: #D97706; }
:is(.version-b, .pagina-inicio) svg.icono--n-check, :is(.version-b, .pagina-inicio) svg.icono--n-checkCirculo { --ic: #15803D; }
:is(.version-b, .pagina-inicio) svg.icono--n-compartir { --ic: #7C3AED; }
:is(.version-b, .pagina-inicio) svg.icono--n-instagram { --ic: #C13584; }
:is(.version-b, .pagina-inicio) svg.icono--n-linkedin { --ic: #0A66C2; }
:is(.version-b, .pagina-inicio) svg.icono--n-mensaje { --ic: #15803D; }
:is(.version-b, .pagina-inicio) svg.icono--n-play { --ic: #E11D48; }
/* los trazos abiertos no se rellenan */
:is(.version-b, .pagina-inicio) svg.icono--n-euro, :is(.version-b, .pagina-inicio) svg.icono--n-check, :is(.version-b, .pagina-inicio) svg.icono--n-herramienta, :is(.version-b, .pagina-inicio) svg.icono--n-compartir { fill-opacity: 0; }
/* la casilla del recorrido tiene borde de color de marca: se queda gris como las demás */
.h-prob__item:hover .h-prob__icono:has(svg.icono), .h-prob__item:focus-visible .h-prob__icono:has(svg.icono) { background: var(--blanco); }
.hv-aviso__icono:has(svg.icono) { width: 32px; height: 32px; }
.ilus-auto__fila i:has(svg.icono) { background: var(--blanco); border: 1px solid var(--gris); }
.icono--marca { display: block; object-fit: contain; }
.h-prob__icono .icono--marca, .h-zona__icono .icono--marca { width: 28px; height: 28px; }