#downloadformatodata {
    cursor: pointer;
}
.login_error{
    color:#af4242;
    background-color: #fde8ec;
    padding: 8px;
    display: none;
    transform: translateY(5px);
    margin-bottom: 20px;
    font-size: 12px;
}
.login_success{
    color:darkgreen;
    background-color: rgb(154, 247, 154);
    padding: 8px;
    display: none;
    transform: translateY(5px);
    margin-bottom: 20px;
    font-size: 12px;
}
.tav{
    font-size: 11px; 
}
/* Estilo base para el semáforo */
.semaforo {
    width: 20px;              /* Tamaño del círculo */
    height: 20px;             /* Tamaño del círculo */
    border-radius: 50%;       /* Círculo perfecto */
    font-weight: bold;
    font-size: 9px;
    color: var(--tooltip-bg-color, #fff);  /* Color del texto dentro del semáforo */
    display: inline-block;    /* Hace que el span se comporte como bloque en línea */
    text-align: center;       /* Centra el texto dentro del círculo */
    vertical-align: middle;   /* Alineación vertical centrada */
    line-height: 20px;        /* Centra el texto dentro del círculo */
    cursor: pointer;
    position: relative;       /* Para los tooltips */
}

/* Colores según la clase semáforo */
.semaforo.rojo {
    background-color: #e74c3c;
    --tooltip-bg-color: #e74c3c; /* Color de fondo del tooltip */
}

.semaforo.amarillo {
    background-color: #eef117;
    --tooltip-bg-color: #eef117;
}

.semaforo.verde {
    background-color: #2ecc71;
    --tooltip-bg-color: #2ecc71;
}

.semaforo.azul {
    background-color: #435be2;
    --tooltip-bg-color: #435be2;
}

/* Estilo para el tooltip (aparece cuando el cursor pasa por encima) */
.semaforo[data-title]:hover::after {
    width: 100px;
    content: attr(data-title);         /* Usa el atributo data-title como texto del tooltip */
    position: absolute;
    background-color: var(--tooltip-bg-color, #6d6c6c); /* Usa el color personalizado */
    color: #fff;                  /* Texto blanco */
    border-radius: 5px;           /* Bordes redondeados */
    padding: 5px 8px;             /* Espaciado interior */
    top: 100%;                    /* Coloca el tooltip debajo del elemento */
    left: 50%;                    /* Centra el tooltip horizontalmente */
    transform: translateX(-50%);  /* Asegura que el tooltip esté centrado */
    white-space: nowrap;          /* Evita que el texto se corte */
    opacity: 0;                   /* Inicialmente invisible */
    pointer-events: none;         /* Evita que el tooltip interfiera con la interacción */
    transition: opacity 0.3s ease, top 0.3s ease; /* Transiciones suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

/* Muestra el tooltip cuando el cursor está encima */
.semaforo:hover[data-title]::after {
    opacity: 1;                /* Muestra el tooltip */
    top: 110%;                 /* Ajusta la posición final del tooltip, un poco más abajo */
}