/* Estilos personalizados para o Plugin Controle de Acesso CLIN-2 */

/* Estilo para o Toast Notification */
.toast {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%); padding: 12px 24px;
    border-radius: 0.375rem; color: white; z-index: 10000;
    opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-size: 0.95rem;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
.toast.info { background-color: #17a2b8; }

/* Custom scrollbar */
#currentVisitorsList::-webkit-scrollbar { width: 8px; }
#currentVisitorsList::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
#currentVisitorsList::-webkit-scrollbar-thumb { background: #a0aec0; border-radius: 10px; }
#currentVisitorsList::-webkit-scrollbar-thumb:hover { background: #718096; }

/* Melhoria de visibilidade dos campos */
#clin2-access-control-app input[type="text"],
#clin2-access-control-app input[type="password"],
#clin2-access-control-app textarea,
#clin2-access-control-app select {
    border-color: #9ca3af; /* Equivalente a gray-400 do Tailwind */
}

#clin2-access-control-app input[type="text"]:focus,
#clin2-access-control-app input[type="password"]:focus,
#clin2-access-control-app textarea:focus,
#clin2-access-control-app select:focus {
    border-color: #4f46e5; /* Equivalente a indigo-600 do Tailwind */
    box-shadow: 0 0 0 1px #4f46e5;
}

/* ########## ESTILOS PARA VOZ E CÂMERA ########## */
.voice-input-button {
    position: absolute;
    right: 0.75rem; /* 12px */
    top: 50%;
    transform: translateY(-50%); /* Correção para centralizar verticalmente */
    cursor: pointer;
    color: #6b7280; /* gray-500 */
    background: transparent;
    border: none;
    padding: 0;
}
.voice-input-button:hover {
    color: #4f46e5; /* indigo-600 */
}
.voice-input-button.listening {
    color: #ef4444; /* red-500 */
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}