/**
 * Estilos corregidos para los estados de operadoras
 * Incluir este archivo en t_inicio_admin.php
 */

/* Definiciones de colores Metronic que faltaban */
.m--font-success { color: #34bfa3 !important; } /* Verde */
.m--font-warning { color: #ffb822 !important; } /* Amarillo/Naranja */
.m--font-danger { color: #f4516c !important; }  /* Rojo */
.m--font-info { color: #36a3f7 !important; }    /* Azul claro */
.m--font-primary { color: #5867dd !important; } /* Azul */
.m--font-accent { color: #716aca !important; }  /* Púrpura */
.m--font-brand { color: #00c5dc !important; }   /* Azul oscuro/Cyan */
.m--font-metal { color: #c4c5d6 !important; }   /* Gris */

/* Tamaños de íconos de estado */
.fa-circle {
    font-size: 12px;
}

/* Estados específicos con fondos */
.estado-disponible {
    background-color: #34bfa3;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-ocupado {
    background-color: #f4516c;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-pausa {
    background-color: #ffb822;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-offline {
    background-color: #c4c5d6;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-reservado {
    background-color: #716aca;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-solicitado {
    background-color: #ffb822;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-sonando {
    background-color: #00c5dc;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.estado-esperando {
    background-color: #fd7e14;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* Animación para estados activos */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.estado-solicitado, .estado-sonando {
    animation: pulse 2s infinite;
}

/* Asegurar que el ícono sea visible en todos los casos */
td .fa-circle {
    display: inline-block;
    width: 12px;
    text-align: center;
}