/* Estilos para la pantalla de carga */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 240, 240, 0.95); /* Fondo gris claro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000; /* Asegura que esté por encima de todo */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
  }
  
  #loader.hidden {
    opacity: 0;
    pointer-events: none; /* Evita interacciones mientras se oculta */
  }
  
  /* Contenedor de la hoja */
  .leaf-container {
    width: 100px;
    height: 100px;
    position: relative;
  }
  
  /* Icono de la hoja */
  .leaf-icon {
    width: 100%;
    height: 100%;
  }
  
  /* Silueta de la hoja */
  .leaf-outline {
    fill: none;
    stroke: #27ae60; /* Color del borde de la hoja (verde oscuro) */
    stroke-width: 2;
  }
  
  /* Efecto de llenado */
  .leaf-fill {
    fill: #2ecc71; /* Color de llenado (verde claro) */
    clip-path: inset(100% 0 0 0); /* Inicia vacío */
    animation: fill-up 1s ease-in-out forwards; /* Animación de llenado */
  }
  
  @keyframes fill-up {
    0% {
      clip-path: inset(100% 0 0 0); /* Vacío */
    }
    100% {
      clip-path: inset(0 0 0 0); /* Lleno */
    }
  }