:root {
    --verde: #4CAF50;
    --verdeOscuro: #009005;
    --rojo: #F44336;
    --amarillo: #d8d223;
    --blanco: #FFFFFF;
    --gris: #9E9E9E;
    --negro: #212121;
    --azul: #2196F3;
    --naranja: #FF5722;
    --cyan: #00BCD4;
    --morado: #9C27B0;
    --verdeClaro: #8BC34A;
    --grisClaro: #E0E0E0;
  
    /* --fuente-principal: 'Nunito Sans', sans-serif; */
    --fuente-secundaria: 'Roboto', sans-serif;
  
    --texto-base: 1rem;
    --texto-titulo: 2rem;
  
    --espaciado-md: 16px;
    --radio-borde: 8px;
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.1);
    --transicion-base: all 0.3s ease-in-out;

    /* colores para los botones */
    --verdeBoton: #4CAF50;
    --verdeOscuroBoton: #009005;
    --rojoBoton: #F44336;
    --amarilloBoton: #d8d223;
    --blancoTextBoton: #FFFFFF;
    --grisTextBoton: #9E9E9E;
  }
  
  body {
    /* font-family: var(--fuente-principal); */
    background-color: var(--blanco);
  }


.anim-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}