@charset "utf-8";
/* CSS Document */
/* Transición suave para todos los componentes del SVG */
#perianto, #caliz, #corola, #androceo, #gineceo, #bracteasespi, #bracteasflor {
  transition: all 0.3s ease;
}

/* 1. HOVER EN caliz: Se iluminan las estructuras del cáliz */
.leyenda-diagrama:has(.li-caliz:hover) ~ .canvas-svg #caliz{
  filter: drop-shadow(0px 0px 8px rgba(51, 102, 0, 0.9)) brightness(1.15);
}

/* 2. HOVER EN EL PERIANTO (Glumas, lemas, páleas y lodículas) */
.leyenda-diagrama:has(.li-perianto:hover) ~ .canvas-svg #perianto {
  filter: drop-shadow(0px 0px 8px rgba(51, 204, 51, 0.9)) brightness(1.15);
}

/* 3. HOVER EN EL ANDROCEO (Limpio y sin desplazamientos) */
.leyenda-diagrama:has(.li-androceo:hover) ~ .canvas-svg #androceo {
  filter: drop-shadow(0px 0px 8px rgba(255, 2555, 0, 0.95)) brightness(1.05);
}

/* 4. HOVER EN EL GINECEO (Ovario y estigmas plumosos) */
.leyenda-diagrama:has(.li-gineceo:hover) ~ .canvas-svg #gineceo {
  filter: drop-shadow(0px 0px 8px rgba(204, 153, 0, 0.9)) brightness(1.15);
}

/* 5. HOVER EN COROLA: Iluminación ocre/dorada para las estructuras dela corola */
.leyenda-diagrama:has(.li-corola:hover) ~ .canvas-svg #corola{
  filter: drop-shadow(0px 0px 8px rgba(204, 51, 0, 0.9)) brightness(1.15);
}
/* 6. HOVER EN brácteas de la espiguilla: Iluminación ocre/dorada para las estructuras dela corola */
.leyenda-diagrama:has(.li-bracteasespi:hover) ~ .canvas-svg #bracteasespi{
  filter: drop-shadow(0px 0px 8px rgba(51, 51, 204, 0.9)) brightness(1.15);
}
/* 7. HOVER EN COROLA: Iluminación brácteas de la flor */
.leyenda-diagrama:has(.li-bracteasflor:hover) ~ .canvas-svg #bracteasflor{
  filter: drop-shadow(0px 0px 8px rgba(204, 51, 204, 0.9)) brightness(1.15);
}